如果高于某个值，是否可以为折线图中的数据点设置不同的颜色？
我为 dxChart 找到了这个示例 - https://stackoverflow.com/a/24928967/949195 - 现在正在为 ChartJS 寻找类似的东西
ChartJS - 每个数据点不同的颜色
IT技术
javascript
angularjs
linechart
chart.js
2021-02-16 18:17:01
6个回答
在更新到 ChartJS 的 2.2.2 版时，我发现接受的答案不再有效。数据集将采用一个数组来保存属性的样式信息。在这种情况下：
var pointBackgroundColors = [];
var myChart = new Chart($('#myChart').get(0).getContext('2d'), {
type: 'line',
data: {
datasets: [
{
data: dataPoints,
pointBackgroundColor: pointBackgroundColors
}
]
}
});
for (i = 0; i < myChart.data.datasets[0].data.length; i++) {
if (myChart.data.datasets[0].data[i] > 100) {
pointBackgroundColors.push("#90cd8a");
} else {
pointBackgroundColors.push("#f58368");
}
}
myChart.update();
我在查看 ChartJS 的示例时发现了这一点，特别是这个：“不同的点大小示例”
使用最新版本的chart.js我建议使用可编写脚本的选项来执行此操作。
可编写脚本的选项为您提供了一种简单的方法，可以根据您提供的某些功能动态地改变数据集属性的样式（例如线点颜色）。您的函数被传递一个“上下文”对象，该对象告诉它点的索引和值等（见下文）。
大多数图表属性都可以编写脚本；每个图表类型的数据集属性会告诉您确切的列表（例如，请参见此处的折线图）。
以下是如何在折线图上使用脚本化选项（基于文档中的示例）。在此图表上，负数据点以红色显示，正数据点以交替的蓝色/绿色显示：
window.myChart = Chart.Line(ctx, {
data: {
labels: x_data,
datasets: [
{
data: y_data,
label: "Test Data",
borderColor: "#3e95cd",
fill: false,
pointBackgroundColor: function(context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
return value < 0 ? 'red' : // draw negative values in red
index % 2 ? 'blue' : // else, alternate values in blue and green
'green';
}
}
],
}
});
context传递给函数的对象可以具有以下属性。对于某些类型的实体，其中一些将不存在，因此请在使用前进行测试。
- chart : 关联的图表
- dataIndex : 当前数据的索引
- dataset : 索引 datasetIndex 处的数据集
- datasetIndex : 当前数据集的索引
- 悬停：如果悬停，则为真
这是对我有用的（v 2.7.0），首先我必须将数据集中的 pointBackgroundColor 和 pointBorderColor 设置为一个数组（如果需要，您可以首先用颜色填充这个数组）：
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
data: dataPoints,
pointBackgroundColor: [],
pointBorderColor: [],
}
]
}
});
然后你可以直接使用点的颜色：
myChart.data.datasets[0].pointBackgroundColor[4] = "#cc00cc";
myChart.data.datasets[0].pointBorderColor[4] = "#cc0000";
myChart.update();
一些其他属性可以用来区分一个点：pointStrokeColor（它显然存在但我似乎无法让它工作），pointRadius & pointHoverRadius（整数），pointStyle（'triangle'，'rect'，'rectRot'， 'cross'、'crossRot'、'star'、'line' 和 'dash'），尽管我似乎无法弄清楚 pointRadius 和 pointStyle 的默认值。
原答案如下。
关于 ChartJS 的好问题。我一直想做类似的事情。即动态地将点颜色更改为不同的颜色。你有没有试过下面这个。我刚刚尝试过，它对我有用。
试试这个：
myLineChart.datasets[0].points[4].fillColor = "rgba(000,111,111,55)" ;
或者试试这个：
myLineChart.datasets[0].points[4].fillColor = "#FF0000";
甚至这个：
myLineChart.datasets[0].points[4].fillColor = "lightgreen";
然后这样做：
myLineChart.update();
我想你可能有类似的东西；
if (myLineChart.datasets[0].points[4].value > 100) {
myLineChart.datasets[0].points[4].fillColor = "lightgreen";
myLineChart.update();
}
还是试试吧。
只是在新的 2.0 版本中添加对我有用的东西。
代替：
myLineChart.datasets[0].points[4].fillColor = "lightgreen";
我不得不使用：
myChart.config.data.datasets[0].backgroundColor[4] = "lightgreen";
不确定这是因为 2.0 的变化还是因为我使用的是条形图而不是折线图。