我有一个Chart.js折线图,其中标签是星期几。我想根据星期几(星期一-星期日)更改点背景。我可以根据数据值更改背景色,但这不是我所需要的。相反,我想给每一天(标签)一个不同的色点。
例如,这就是我可以根据数据值(不是我所需要的)更改点的方法
chartData: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
data: [57, 569, 12, 78, 569, 0, 5],
fill: true,
pointRadius: 4,
pointBackgroundColor: function(context) {
var index = context.dataIndex
var value = context.dataset.data[index]
return value > 100 ? 'green' : 'red'
}
}]
},
但是,当我尝试将其应用于标签时,出现错误:
TypeError:无法读取pointBackgroundColor处未定义的属性“ 0”
chartData: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
data: [57, 569, 12, 78, 569, 0, 5],
fill: true,
pointRadius: 4,
pointBackgroundColor: function(context) {
var index = context.dataIndex;
var value = context.labels[index];
if (value == 'Monday') return 'green'
if (value == 'Tuesday') return 'red'
if (value == 'Wednesday') return 'blue'
}
}]
},
您可以为pointBackgroundColor属性提供颜色数组:
var ctx = document.getElementById('lineChart').getContext('2d');
var colors = ["rgba(255,0,0,1)", "rgba(0,255,0,1)", "rgba(0,0,255,1)", "rgba(255,0,0,1)", "rgba(0,255,0,1)"];
var colors1 = Object.assign([], colors);
colors1.sort();
var data = {
labels: [
"1 ",
"2 ",
"3 ",
"4 ",
"5 ",
],
datasets: [{
label: "line 1",
strokeColor: "rgba(151,187,205,1)",
pointRadius: 5,
pointBackgroundColor: colors,
fill: false,
data: [
0.33771896,
0.903282737,
0.663260514,
0.841077343,
0.172840693,
],
}, {
label: "Average",
strokeColor: "rgba(245, 15, 15, 0.5)",
pointBackgroundColor: colors1,
pointRadius: 5,
fill: false,
data: [0.70934844,
0.562981612,
0.496916323,
0.410302488,
0.55354621
]
}]
};
var options = {
datasetFill: false,
}
var myChart = new Chart(document.getElementById("lineChart"), {
type: 'line',
data,
options
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div>
<canvas id="lineChart" width="600" height="200"></canvas>
</div>
谢谢,这成功了。我能够根据标签从服务器发送一系列颜色。