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

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

我在dxChart中找到了这个示例，现在正在为ChartJS寻找类似的示例

原始答案如下

---

关于ChartJS的好问题。我一直想做类似的事情。i、 e动态地将点颜色更改为不同的颜色。你试过下面这个吗。我刚试过，它对我有效

试试这个：

myLineChart.datasets[0].points[4].fillColor =   "rgba(000,111,111,55)" ; 

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

或者试试这个：

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中的更改，还是因为我使用的是条形图而不是折线图。

在更新到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();

var pointBackgroundColors=[]；
var myChart=new Chart（$（'#myChart'）.get（0）.getContext（'2d'）{
键入：“行”，
数据：{
数据集：[
{
数据：数据点，
pointBackgroundColor:pointBackgroundColor
}
]
}
});
对于（i=0；i100）{
PointBackgroundColor.push（“90cd8a”）；
}否则{
PointBackgroundColor.push（“#f58368”）；
}
}
myChart.update（）；

---

我在查看ChartJS的示例时发现了这一点，特别是这一个：

如果您以这种方式初始化myChart

var myChart = new Chart(ctx, {
  type: 'line',
  data: {

myBar = new Chart(ctx).Line(barChartData, {

您必须按此代码更改线条颜色

  myChart.data.datasets[0].backgroundColor[0] ="#87CEFA";

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

---

---

如果以这种方式初始化myChart

var myChart = new Chart(ctx, {
  type: 'line',
  data: {

myBar = new Chart(ctx).Line(barChartData, {

您必须按此代码更改线条颜色

  myChart.data.datasets[0].backgroundColor[0] ="#87CEFA";

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

以下是对我有效的方法（V2.7.0），首先我必须将数据集中的pointBackgroundColor和pointBorderColor设置为一个数组（如果需要，可以首先用颜色填充该数组）：

然后，您可以直接使用点的颜色：

  myChart.data.datasets[0].pointBackgroundColor[4] = "#cc00cc";
  myChart.data.datasets[0].pointBorderColor[4] = "#cc0000";
  myChart.update();

---

其他一些用于区分点的属性：pointStrokeColor（它显然存在，但我似乎无法让它工作）、pointRadius和pointHoverRadius（整数）、pointStyle（‘三角形’、‘矩形’、‘矩形’、‘交叉’、‘交叉’、‘星形’、‘直线’和‘破折号’），虽然我似乎无法确定pointRadius和pointStyle的默认值。

对于最新版本的

chart.js

，我建议使用

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

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

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

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';
                }
            }
        ],
    }
});

window.myChart=Chart.Line（ctx{
数据：{
标签：x_数据，
数据集：[
{
数据：y_数据，
标签：“测试数据”，
边框颜色：“3e95cd”，
填充：假，
pointBackgroundColor:函数（上下文）{
var index=context.dataIndex；
var值=context.dataset.data[index]；
返回值<0？'red'：//以红色绘制负值
索引%2？'blue'：//否则，用蓝色和绿色替换值
“绿色”；
}
}
],
}
});

传递给函数的

上下文

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

• 图表：关联的图表
• dataIndex：当前数据的索引
• 数据集：索引datasetIndex处的数据集
• datasetIndex：数据库的索引 当前数据集
• 悬停：如果悬停，则为true

---

我应该提到我在AngularJS应用程序中使用了这个插件：但是上面的代码让我通过按照ChartJS文档的常规方式进行设置来完成。对我来说，它没有显示关键点本身，我不知道为什么？需要帮助吗？要控制点的边框颜色，请使用相同的方法，但使用

pointBorderColor

属性。

myChart.data.datasets[0]。pointBorderColor[4]=“cc0000”我的给定错误（未定义）&
myChart.data.datasets[0]。pointBorderColor=“#cc0000”更改所有点的颜色&而不是特定点。有人知道如何更改特定点的颜色吗？这里是2.7.3，图表对象中没有.points结构。对于这种情况，有一个半径大小的解决方案可能也很有用。对于Chart.js的最新版本，可以通过将pointBackgroundColor设置为颜色数组（每个点一个）来实现这一点，或者-更灵活地-通过将其设置为根据上下文设置颜色的函数。有关示例，请参见下面我的答案（2019年11月）。谢谢，这对我来说非常有效。但是，如果我想用不同的颜色绘制线，而不是用不同的颜色绘制点（根据当前值），我应该在哪里进行更改？请查看文档中的图表->线->数据集属性。。。您将看到，您可以使用backgroundColor和borderColor设置线条样式，这也是可编写脚本的选项