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

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

amCharts就是一个例子：

我尝试过更改点的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小提琴：

---

p/s：仅更改点的颜色，这不是我想要的。

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

但是，由于没有工具提示（将ToolTipeEvents设置为空数组），因此可以使用3个不同的系列以及Chart.js不打印空值的事实来实现所需的功能

---

线条的不同颜色 下面是它的样子

我们制作了3个系列（如果您的数据和范围是动态的，那么您可以通过编程实现这一点——这更像是一个JavaScript问题，而不是Chart.js问题）

我刚刚修改了小提琴中的代码，以显示相关位（它与LineWithLine扩展同样适用）

如果希望某个颜色出现在交叉点的顶部（数据中为-10m和-2m），可以重新排列序列。后续系列的颜色优先

---

---

Fiddle-

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

但是，由于没有工具提示（将ToolTipeEvents设置为空数组），因此可以使用3个不同的系列以及Chart.js不打印空值的事实来实现所需的功能

---

线条的不同颜色 下面是它的样子

我们制作了3个系列（如果您的数据和范围是动态的，那么您可以通过编程实现这一点——这更像是一个JavaScript问题，而不是Chart.js问题）

我刚刚修改了小提琴中的代码，以显示相关位（它与LineWithLine扩展同样适用）

如果希望某个颜色出现在交叉点的顶部（数据中为-10m和-2m），可以重新排列序列。后续系列的颜色优先

---

---

小提琴-

太棒了！我还用你的解决方案更新了我原来的JS Fiddle，以展示它如何处理原来的问题。好极了我还用你的解决方案更新了我原来的JS Fiddle，以展示它如何处理原来的问题。这里是@potatopeelings发布的解决方案的JSFIDLE，这里是更新的chartjs依赖项，更新为使用https。这里是@potatopeelings发布的解决方案的JSFIDLE，这里是更新的chartjs依赖项，更新为使用https。

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