如果折线图中的数据点高于某个值，有没有办法为它设置不同的颜色？
我为 dxChart 找到了这个示例 - https://stackoverflow.com/a/24928967/949195 - 现在正在为 ChartJS 寻找类似的东西
【问题讨论】：
标签： javascript angularjs linechart chart.js
在更新到 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 的示例时发现了这一点，特别是这个："Different Point Sizes Example"
【讨论】：
pointBorderColor 属性。
对于最新版本的chart.js，我建议使用scriptable options。
可编写脚本的选项为您提供了一种简单的方法来根据您提供的某些功能动态地改变数据集属性的样式（例如线点颜色）。你的函数被传递了一个'context'对象，告诉它点etc.的索引和值（见下文）。
大多数图表属性都可以编写脚本；每种图表类型的数据集属性会告诉您确切的列表（例如请参阅here 了解折线图）。
以下是您在折线图上使用脚本选项的方法（基于文档中的example）。在此图表上，负数据点以红色显示，正数据点以交替的蓝色/绿色显示：
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 对象可以具有以下属性。其中一些不会出现在某些类型的实体中，因此请在使用前进行测试。
【讨论】：
这对我有用（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 的默认值。
【讨论】：
myChart.data.datasets[0].pointBorderColor[4] = "#cc0000"; 它给我的错误（未定义）和myChart.data.datasets[0].pointBorderColor = "#cc0000"; 更改所有点颜色而不是特定点。有谁知道如何改变特定点的颜色？
For chartjs 2.0 see this following answer.
原始答案如下。
关于 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 的变化，还是因为我使用的是条形图而不是折线图。
【讨论】：
如果你以这种方式初始化 myChart，
var myChart = new Chart(ctx, {
type: 'line',
data: {
您必须通过此代码更改线条颜色
myChart.data.datasets[0].backgroundColor[0] ="#87CEFA";
如果你以这种方式初始化 myChart，
myBar = new Chart(ctx).Line(barChartData, {
您必须通过此代码更改线条颜色
myLineChart.datasets[0].points[4].fillColor = "#FF0000";
【讨论】：