ChartJS - 每个数据点不同的颜色

Question

如果折线图中的数据点高于某个值，是否有办法为其设置不同的颜色？

我为 dxChart 找到了这个例子 - https://stackoverflow.com/a/24928967/949195 - 现在正在为 ChartJS 寻找类似的东西

Answer 1

更新到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 的示例时发现了这个，特别是这个：“不同点大小示例”

Answer 2

对于最新版本的

chart.js

，我建议使用可编写脚本的选项。

可编写脚本的选项为您提供了一种根据您提供的某些功能动态改变数据集属性样式（例如线点颜色）的简单方法。您的函数传递了一个“上下文”对象，该对象告诉它点的索引和值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

对象可以具有以下属性。其中一些不会出现在某些类型的实体中，因此请在使用前进行测试。

• chart：相关图表
• dataIndex：当前数据的索引
• dataset：索引datasetIndex
处的数据集
• datasetIndex: 的索引 当前数据集
• hover：如果悬停则为真

Answer 3

这对我有用（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', and 'dash'), 虽然我似乎无法弄清楚 pointRadius 和 pointStyle 的默认值。

Answer 4

对于 chartjs 2.0，请参阅以下答案。

下面的原始答案。

---

关于 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();
 }

无论如何都要试一试。

Answer 5

只需在新的 2.0 版本中添加对我有用的内容即可。

代替：

myLineChart.datasets[0].points[4].fillColor =  "lightgreen";

我必须使用：

myChart.config.data.datasets[0].backgroundColor[4] = "lightgreen";

不确定这是因为 2.0 的变化还是因为我使用的是条形图而不是折线图。

Answer 6

如果以这种方式初始化 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";

Answer 7

大多数方法对我来说太复杂了，所以这里是解决方法： 我正在使用 react btw，所以在数据参数中我正在这样做

之前：

datasets:[
        {
            label: 'Maximum Predicted Temperature',
            fill: false,
            lineTension: 0.5,
            backgroundColor: ['red'],
            borderColor: 'rgba(0,0,0,1)',
            borderWidth: 2,
            data: max
        },

之后：

datasets:[
        {
            label: 'Maximum Predicted Temperature',
            fill: false,
            lineTension: 0.5,
            backgroundColor: ['red','blue','green','yellow','orange','purple','pink','brown','grey','black','white','violet'],
            borderColor: ['red','blue','green','yellow','orange','purple','pink','brown','grey','black','white','violet'],
            borderWidth: 2,
            data: max
        }

如果给定的数据点多于提供的颜色数量，颜色将循环，并且红色将应用于每 12 个数据点它真的帮助我认为解决方案有点笨拙但提供更多控制希望这有帮助