如何在Chart.js中更改折线图的线段颜色？

在javascript图形库中，有没有一种方法可以更改两个相邻点之间直线的线段颜色

---

谢谢

您可以扩展图表，用不同的颜色重新绘制您选择的部分

---

预览

---

脚本

Chart.types.Line.extend({
    name: "LineAlt",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var index = 1;
        var datasetIndex = 0;

        var hasValue = function(item){
            return item.value !== null;
        },
        previousPoint = function (point, collection, index) {
            return Chart.helpers.findPreviousWhere(collection, hasValue, index) || point;
        };

        var ctx = this.chart.ctx;
        var dataset = this.datasets[datasetIndex];
        var pointsWithValues = Chart.helpers.where(dataset.points, hasValue);
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 3;
        ctx.beginPath();
        var point = dataset.points[index];
        ctx.moveTo(point.x, point.y);
        point = dataset.points[index + 1];
        var previous = previousPoint(point, pointsWithValues, index + 1);
        ctx.bezierCurveTo(
            previous.controlPoints.outer.x,
            previous.controlPoints.outer.y,
            point.controlPoints.inner.x,
            point.controlPoints.inner.y,
            point.x,
            point.y
        );
        ctx.stroke();
    }
});

及

---

---

Fiddle-

这里有一个在Charts.js 2中实现这一点的工作示例

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它现在内置在CHart.js 3中：

谢谢@potatopeelings！这也适用于Chart.js 2吗？我认为不会（2.x是一个重写版本）。看看这个：
...
new Chart(ctx).LineAlt(data);

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: {}
});