ChartJs：数据点之间的不同填充颜色

Question

我正在尝试更改几个数据点之间的填充颜色，例如点 1,2 之间是黑色，点 3-5 之间是红色。

一个例子是 amCharts：http ://www.amcharts.com/demos/line-with-changed-color/

我曾尝试更改点的 fillColor 属性，但似乎所做的只是更改点的填充颜色。

var chart = new Chart(ctx).LineWithLine(data, options);

chart.datasets[0].points[0].fillColor = "purple";
chart.datasets[0].points[1].fillColor = "purple";
chart.datasets[0].points[2].fillColor = "purple";
chart.update();

但是，如果我更改选项中的填充颜色，我会看到图表的填充颜色按预期更改。我是使用了错误的属性还是库中存在错误？

JS小提琴：https : //jsfiddle.net/hdnu4bpa/

p/s：这个问题只是改变了点的颜色，这不是我想要的。

Answer 1

填充颜​​色适用于整个系列，而不适用于点之间的区域。

但是，由于您没有工具提示（您将 tooltipEvents 设置为空数组），您可以使用 3 个不同的系列以及 Chart.js 不绘制空值的事实来实现您想要的。

一条线的不同填充颜色

这是它的样子

我们制作了 3 个系列（如果您的数据和范围是动态的，您可以以编程方式执行此操作 - 尽管这更像是一个 JavaScript 问题而不是 Chart.js 问题）

var data = {
    labels: ["-2h", "-10m", "-7m", "-2m", "-5s"],
    datasets: [{
        data: [12.5, 3.1, null, null, null],
        fillColor: "rgba(151,205,187,0.2)",
        strokeColor: "rgba(151,205,187,1)",
        pointColor: "rgba(151,205,187,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,205,187,1)",
    }, {
        data: [null, 3.1, 3.3, 4.2, null],
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
    }, {
        data: [null, null, null, 4.2, 15.5],
        fillColor: "rgba(205,151,187,0.2)",
        strokeColor: "rgba(205,151,187,1)",
        pointColor: "rgba(205,151,187,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(205,151,187,1)",
    }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");
var options = {
   showTooltips: false,
   datasetFill: true,
}

var chart = new Chart(ctx).Line(data, options);

我刚刚改编了你小提琴中的代码以显示相关位（它与你的 LineWithLine 扩展同样有效）

如果您希望某种颜色出现在连接点的顶部（数据中的 -10m 和 -2m），您可以重新排列系列。后面系列的颜色优先。

小提琴 - https://jsfiddle.net/kurtybra/