问题描述
我有一个折线 Chart.js 图表，其中标签是星期几.我想根据今天(周一 - 周日)更改点背景.我可以根据数据值更改背景颜色，但这不是我需要的.相反，我想给每一天(标签)一个不同的颜色点.
例如，这就是我可以根据数据值更改点的方式(不是我需要的)
chartData: {标签:['星期一'，'星期二'，'星期三'，'星期三'，'星期四'，'星期五'，'星期六'，'星期日']，数据集:[{数据:[57, 569, 12, 78, 569, 0, 5],填写:真实，点半径:4，点背景颜色:函数(上下文){var index = context.dataIndexvar value = context.dataset.data[索引]返回值>100 ?绿色":红色"}}]},但是当我尝试将其应用于标签时，出现错误:
<块引用>TypeError: 无法读取 pointBackgroundColor 处未定义的属性0"
chartData: {标签:['星期一'，'星期二'，'星期三'，'星期三'，'星期四'，'星期五'，'星期六'，'星期日']，数据集:[{数据:[57, 569, 12, 78, 569, 0, 5],填写:真实，点半径:4，点背景颜色:函数(上下文){var index = context.dataIndex;var value = context.labels[索引];if (value == 'Monday') 返回'绿色'if (value == 'Tuesday') 返回'红色'if (value == 'Wednesday') 返回'蓝色'}}]},你可以给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);颜色1.sort();变量数据 = {标签: ["1","2","3","4","5",],数据集:[{标签:第 1 行"，strokeColor: "rgba(151,187,205,1)",点半径:5，点背景颜色:颜色，填充:假，数据: [0.33771896,0.903282737,0.663260514,0.841077343,0.172840693,],}, {标签:平均"，strokeColor: "rgba(245, 15, 15, 0.5)",点背景颜色:颜色1，点半径:5，填充:假，数据:[0.70934844，0.562981612,0.496916323,0.410302488,0.55354621]}]};变量选项 = {数据集填充:假，}var myChart = new Chart(document.getElementById("lineChart"), {类型:'线'，数据，选项})<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></脚本><canvas id="lineChart" width="600" height="200"></canvas></div>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: 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'
}
}]
},
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 点的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！