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的样本，特别是这个样本："Different Point Sizes Example"

Answer 2

这对我有用（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＆amp; pointHoverRadius（整数），pointStyle（'triangle'，'rect'，'rectRot'，'cross'，'crossRot'，'star'，'line'和'dash'），虽然我似乎无法弄清楚pointRadius和pointStyle的默认值。

Answer 3

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

无论如何都试一试。

Answer 4

在新的2.0版本中添加适合我的功能。

而不是：

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

我不得不使用：

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

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

Answer 5

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

<table id="test">
    <tr>
        <td></td>
    </tr>
</table>

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

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

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

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

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

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

Answer 6

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

例如，以下是基于文档中示例的图表。这是一个折线图，如果数据点为负，则数据点以红色显示，否则以蓝色/绿色交替显示：

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

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

6 个答案: