Javascript ChartJS中线段的不同颜色

我有一个时间线图表类型。我想根据数据集对象值定义两点之间每一步的颜色

在我的数据集数据数组中，我添加了第三项，它将定义颜色（如果<30==>绿色/>30==>红色）

实际上我只是想用红色

我发现，关于如何做到这一点。但它是基于非时间图表类型的

我试着使它适应我的例子，但在最后一步我得到了错误

ctx.bezierCurveTo(
  previous.controlPoints.outer.x,
  previous.controlPoints.outer.y,
  point.controlPoints.inner.x,
  point.controlPoints.inner.y,
  point.x,
  point.y
);

这是复制品

var canvas=document.getElementById（'myChart'）；
让customLine=Chart.controllers.line.extend({
名称：'行'，
绘图：函数（）{
Chart.controllers.line.prototype.draw.apply（这是参数）；
让datasetLength=this.chart.config.data.datasets.length；
for（设i=0；i
已经有一个答案，其中提到了一个以Chart.js 2.7.1编写的版本，可以毫无问题地更新到最新的2.9.3版本

埃戈罗夫奇金的功劳

代码：

var ctx = document.getElementById('myChart').getContext('2d');
//adding custom chart type
Chart.defaults.multicolorLine = Chart.defaults.line;
Chart.controllers.multicolorLine = Chart.controllers.line.extend({
  draw: function(ease) {
    var
      startIndex = 0,
      meta = this.getMeta(),
      points = meta.data || [],
      colors = this.getDataset().colors,
      area = this.chart.chartArea,
      originalDatasets = meta.dataset._children
        .filter(function(data) {
          return !isNaN(data._view.y);
        });

    function _setColor(newColor, meta) {
      meta.dataset._view.borderColor = newColor;
    }

    if (!colors) {
      Chart.controllers.line.prototype.draw.call(this, ease);
      return;
    }

    for (var i = 2; i <= colors.length; i++) {
      if (colors[i-1] !== colors[i]) {
        _setColor(colors[i-1], meta);
        meta.dataset._children = originalDatasets.slice(startIndex, i);
        meta.dataset.draw();
        startIndex = i - 1;
      }
    }

    meta.dataset._children = originalDatasets.slice(startIndex);
    meta.dataset.draw();
    meta.dataset._children = originalDatasets;

    points.forEach(function(point) {
      point.draw(area);
    });
  }
});

var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'multicolorLine',

    // The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
            //first color is not important
            colors: ['', 'red', 'green', 'blue']
        }]
    },

    // Configuration options go here
    options: {}
});

var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
//添加自定义图表类型
Chart.defaults.multicolorLine=Chart.defaults.line；
Chart.controllers.multicolorLine=Chart.controllers.line.extend({
绘图：功能（轻松）{
变量
startIndex=0，
meta=this.getMeta（），
点=meta.data | |[]，
colors=this.getDataset（）.colors，
面积=this.chart.chartArea，
originalDatasets=meta.dataset.\u子项
.过滤器（功能（数据）{
return！isNaN（data.\u view.y）；
});
函数_setColor（newColor，meta）{
meta.dataset.\u view.borderColor=newColor；
}
如果（！颜色）{
图表.控制器.线条.原型.绘图.调用（此，ease）；
返回；
}
对于（var i=2；i您链接的示例使用2015年5月发布的chart.js版本1.0.2。
chart.Line
是1.0.x语法。不要简单地复制所有代码，想想看。您在2.9.0项目中使用1.0.x语法。它不能以这种方式工作。您必须使用2.x语法。我已经更新了示例，它不再工作，因为现在您导入2.9.0以获得1.0.2语法。工作示例项目：导入1.0.2，使用1.0.2语法---您的项目：导入2.9.0，使用1.0.2语法您必须更改语法以匹配chart.js 2.9.0。
var ctx = document.getElementById('myChart').getContext('2d');
//adding custom chart type
Chart.defaults.multicolorLine = Chart.defaults.line;
Chart.controllers.multicolorLine = Chart.controllers.line.extend({
  draw: function(ease) {
    var
      startIndex = 0,
      meta = this.getMeta(),
      points = meta.data || [],
      colors = this.getDataset().colors,
      area = this.chart.chartArea,
      originalDatasets = meta.dataset._children
        .filter(function(data) {
          return !isNaN(data._view.y);
        });

    function _setColor(newColor, meta) {
      meta.dataset._view.borderColor = newColor;
    }

    if (!colors) {
      Chart.controllers.line.prototype.draw.call(this, ease);
      return;
    }

    for (var i = 2; i <= colors.length; i++) {
      if (colors[i-1] !== colors[i]) {
        _setColor(colors[i-1], meta);
        meta.dataset._children = originalDatasets.slice(startIndex, i);
        meta.dataset.draw();
        startIndex = i - 1;
      }
    }

    meta.dataset._children = originalDatasets.slice(startIndex);
    meta.dataset.draw();
    meta.dataset._children = originalDatasets;

    points.forEach(function(point) {
      point.draw(area);
    });
  }
});

var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'multicolorLine',

    // The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
            //first color is not important
            colors: ['', 'red', 'green', 'blue']
        }]
    },

    // Configuration options go here
    options: {}
});