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

Question

有没有办法为折线图中的数据点设置不同的颜色,如果它高于某个值？

我找到了dxChart的这个例子 - /sf/answers/1745027721/ - 现在正在为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我建议使用可编写脚本的选项来执行此操作。

脚本化选项为您提供了一种简单的方法，可以根据您提供的某些功能动态地改变数据集属性的样式（例如线点颜色）。这会传递一个“上下文”对象，该对象告诉它点的索引和值等（见下文）。

大多数图表属性都可以编写脚本；每个图表类型的数据集属性会告诉您确切的列表（例如，请参见此处的折线图）。

以下是如何在折线图上使用脚本化选项（基于文档中的示例）。在此图表上，负数据点以红色显示，正数据点以交替的蓝色/绿色显示：

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 : 当前数据集的索引
• 悬停：如果悬停，则为真

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'和'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();
 }

试试看吧.