Javascript ChartJS - 每个数据点的颜色不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28159595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ChartJS - Different color per data point
提问by Xander
Is there a way to set a different color to a datapoint in a Line Chart if its above a certain value?
如果高于某个值，是否可以为折线图中的数据点设置不同的颜色？
I found this example for dxChart - https://stackoverflow.com/a/24928967/949195- and now looking for something similar for ChartJS
我为 dxChart 找到了这个示例 - https://stackoverflow.com/a/24928967/949195- 现在正在为 ChartJS 寻找类似的东西
采纳答案by 007
For chartjs 2.0 see this following answer.
Original answer below.
原答案如下。
Good question regarding ChartJS. I've been wanting to do a similar thing. i.e dynamically change the point colour to a different colour. Have you tried this below. I just tried it and it worked for me.
关于 ChartJS 的好问题。我一直想做类似的事情。即动态地将点颜色更改为不同的颜色。你有没有试过下面这个。我刚刚尝试过，它对我有用。
Try this:
尝试这个：
myLineChart.datasets[0].points[4].fillColor = "rgba(000,111,111,55)" ;
Or Try this:
或者试试这个：
myLineChart.datasets[0].points[4].fillColor = "#FF0000";
Or even this:
甚至这个：
myLineChart.datasets[0].points[4].fillColor = "lightgreen";
Then do this:
然后这样做：
myLineChart.update();
I guess you could have something like;
我想你可能有类似的东西；
if (myLineChart.datasets[0].points[4].value > 100) {
myLineChart.datasets[0].points[4].fillColor = "lightgreen";
myLineChart.update();
}
Give it a try anyway.
还是试试吧。
回答by JIntro
In updating to version 2.2.2 of ChartJS, I found that the accepted answer no longer works. The datasets will take an array holding styling information for the properties. In this case:
在更新到 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();
I found this looking through the samples for ChartJS, specifically this one: "Different Point Sizes Example"
我在查看 ChartJS 的示例时发现了这一点，特别是这个：“不同点大小示例”
回答by braks
Here's what worked for me (v 2.7.0), first I had to set pointBackgroundColor and pointBorderColor in the dataset to an array (you can fill this array with colours in the first place if you want):
这是对我有用的（v 2.7.0），首先我必须将数据集中的 pointBackgroundColor 和 pointBorderColor 设置为一个数组（如果需要，您可以首先用颜色填充这个数组）：
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
data: dataPoints,
pointBackgroundColor: [],
pointBorderColor: [],
}
]
}
});
Then you can monkey with the colours of the points directly:
然后你可以直接使用点的颜色：
myChart.data.datasets[0].pointBackgroundColor[4] = "#cc00cc";
myChart.data.datasets[0].pointBorderColor[4] = "#cc0000";
myChart.update();
Some other properties to play with to distinguish a point: pointStrokeColor (it apparently exists but I can't seem to get it to work), pointRadius & pointHoverRadius (integers), pointStyle ('triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'), though I can't seem to figure out the defaults for pointRadius and pointStyle.
一些其他属性可以用来区分一个点：pointStrokeColor（它显然存在但我似乎无法让它工作），pointRadius＆pointHoverRadius（整数），pointStyle（'triangle'，'rect'，'rectRot'， 'cross'、'crossRot'、'star'、'line' 和 'dash'），尽管我似乎无法弄清楚 pointRadius 和 pointStyle 的默认值。
回答by Martin CR
With recent versions of chart.jsI would recommend doing this with scriptable options.
使用最新版本的chart.js我建议使用可编写脚本的选项来执行此操作。
Scriptable options give you an easy way to vary the style of a dataset property (e.g. line point colour) dynamically according to some function you provide. This is passed a 'context' object that tells it the index and value of the point etc.(see below).
脚本化选项为您提供了一种简单的方法，可以根据您提供的某些功能动态地改变数据集属性的样式（例如线点颜色）。这会传递一个“上下文”对象，该对象告诉它点的索引和值等（见下文）。
Most chart properties can be scripted; the dataset properties for each chart type tell you the exact list (e.g.see herefor line chart).
大多数图表属性都可以编写脚本；每个图表类型的数据集属性会告诉您确切的列表（例如，请参见此处的折线图）。
Here is how you might use scriptable options on a line chart (based on the examplein the docs). On this chart negative data points are shown in red, and positive ones in alternating blue/green:
以下是如何在折线图上使用脚本化选项（基于文档中的示例）。在此图表上，负数据点以红色显示，正数据点以交替的蓝色/绿色显示：
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';
}
}
],
}
});
The contextobject passed to your function can have the following properties. Some of these won't be present for certain types of entity, so test before use.
context传递给函数的对象可以具有以下属性。对于某些类型的实体，其中一些将不存在，因此请在使用前进行测试。
- chart: the associated chart
- dataIndex: index of the current data
- dataset: dataset at index datasetIndex
- datasetIndex: index of the current dataset
- hover: true if hovered
- chart: 关联的图表
- dataIndex: 当前数据的索引
- dataset: 索引 datasetIndex 处的数据集
- datasetIndex: 当前数据集的索引
- 悬停：如果悬停，则为真
回答by NickA
Just adding what worked for me in the new 2.0 version.
只是在新的 2.0 版本中添加对我有用的东西。
Instead of:
代替：
myLineChart.datasets[0].points[4].fillColor = "lightgreen";
I had to use:
我不得不使用：
myChart.config.data.datasets[0].backgroundColor[4] = "lightgreen";
Not sure if that's because of a change in 2.0 or because I'm using a bar chart and not a line chart.
不确定这是因为 2.0 的变化还是因为我使用的是条形图而不是折线图。
回答by user3200692
If you initialize the myChart in this manner,
如果您以这种方式初始化 myChart，
var myChart = new Chart(ctx, {
type: 'line',
data: {
you have to change line color by this code
您必须通过此代码更改线条颜色
myChart.data.datasets[0].backgroundColor[0] ="#87CEFA";
If you initialize the myChart in this manner,
如果您以这种方式初始化 myChart，
myBar = new Chart(ctx).Line(barChartData, {
you have to change line color by this code
您必须通过此代码更改线条颜色
myLineChart.datasets[0].points[4].fillColor = "#FF0000";
