如何根据标签更改Chart.js点的颜色 [英] How to change the color of Chart.js points depending on the label
问题描述
我有一个Chart.js折线图,其中的标签是星期几.我想根据星期几(星期一-星期日)更改点背景.我可以根据数据值更改背景色,但这不是我所需要的.相反,我想给每一天(标签)一个不同的色点.
I have a line Chart.js chart where the labels are the days of week. I would like to change the point background depending on what day it is (Monday - Sunday). I am able to change the background color depending on the data values but that's not what I need. Instead, I want to give each day (label) a different color point.
例如,这就是我可以根据数据值(不是我所需要的)更改点的方法
For example, this is how I can change the points depending on the data values (not what I need)
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'
}
}]
},
但是当我尝试将其应用于标签时,出现了错误:
But when I tried to apply this to labels, I got an error:
TypeError:无法读取pointBackgroundColor处未定义的属性"0"
TypeError: Cannot read property '0' of undefined at pointBackgroundColor
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属性提供颜色数组:
You can give an array of colors to pointBackgroundColor property:
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>
这篇关于如何根据标签更改Chart.js点的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!