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

xuo3flqw  于 2023-03-12  发布在  Chart.js
关注(0)|答案(7)|浏览(216)

有没有办法在折线图中的数据点超过某个值时设置不同的颜色?
我找到了dxChart的这个例子-https://stackoverflow.com/a/24928967/949195-现在我想为ChartJS找一些类似的例子

dy1byipe

dy1byipe1#

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

9njqaruj

9njqaruj2#

对于chart.js的最新版本,我建议使用scriptable options执行此操作。
脚本选项为您提供了一个简单的方法,根据您提供的函数动态地改变数据集属性的样式(例如线点颜色)。您的函数被传递了一个“context”对象,该对象告诉它点的索引和值 * 等 *(见下文)。
大多数图表属性都可以编写脚本;每个图表类型的数据集属性告诉你确切的列表(e.g. 见这里的折线图)。
以下是在折线图上使用脚本选项的方法(基于文档中的示例)。在此图表上,负数据点显示为红色,正数据点显示为蓝/绿色交替:

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对象可以有以下属性。其中一些属性对于某些类型的实体是不存在的,所以在使用前要进行测试。

    • 图表 *:关联的图表
    • 数据索引 *:当前数据的索引
    • 数据集 *:索引处的数据集datasetIndex
    • 数据集索引 *:当前数据集的索引
  • hover:如果悬停则为true
o4hqfura

o4hqfura3#

下面是我的工作(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(“三角形”、“矩形”、“矩形旋转”、"十字“、”十字旋转“、”星形“、”线条“和”虚线“),尽管我似乎无法弄清楚pointRadius和pointStyle的默认值。

iovurdzv

iovurdzv4#

For chartjs 2.0 see this following answer.
原始答案如下。
关于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();
 }

不管怎样,给予一试吧。

zour9fqk

zour9fqk5#

只是在新的2.0版本中添加了对我有效的内容。
取代:

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

我不得不用途:

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

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

wecizke3

wecizke36#

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

smtd7mpg7#

大多数的方法对我来说太复杂了,所以这里是如何解决它:顺便说一句,我使用react,所以在data参数中我这样做
之前:

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个数据点,它真的帮助了我,认为解决方案有点笨拙,但给出了更多的控制,希望这有帮助

相关问题