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

Question

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

我为 dxChart 找到了这个示例 - - 现在正在为 ChartJS 寻找类似的东西

Answer 1

下面是原始答案。

关于 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 2

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

而不是：

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

我必须使用：

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

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

Answer 3

在更新到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"

Answer 4

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

这是对我有用的方法 (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 6

对于 chart.js 的最新版本，我建议使用 scriptable options。

可编写脚本的选项让您可以轻松地根据您提供的某些功能动态改变数据集的样式属性（例如线点颜色）。您的函数被传递给一个 'context' 对象，该对象告诉它索引和点的值等（见下文）。

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

以下是您如何在折线图上使用脚本化选项（基于文档中的 example）。在此图表上，负数据点以红色显示，正数据点交替显示 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';
                }
            }
        ],
    }
});

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

图表：关联图表
dataIndex: 当前数据的索引
dataset：索引datasetIndex
datasetIndex: 索引当前数据集
悬停：悬停时为真

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

ChartJS - Different color per data point

javascript

linechart

angularjs

chart.js