在chart.js中的特定点后更改图形线条颜色

Question

我正在尝试获得以下结果：http://i.stack.imgur.com/VQDWR.png

我试图通过创建以下无效的扩展名来做到这一点：

changeGraphLineColor = {
    changeLineColor: function (chart, pointIndex) {
      const context = chart.chart.ctx;

      const meta = chart.getDatasetMeta(0); // first dataset is used to discover X coordinate of a point
      const data = meta.data;
      const pt1_x = data[pointIndex]._model.x;
      const pt1_y = data[pointIndex]._model.y;
      const pt2_x = data[data.length - 1]._model.y;
      const pt2_y = data[data.length - 1]._model.y;

      const gradientFill = context.createLinearGradient(pt1_x, pt1_y, pt2_x, pt2_y);
      gradientFill.addColorStop(0, 'rgba(0, 0, 0, 1)');
      gradientFill.addColorStop(1, 'rgba(255, 0, 255, 1)');
      context.fillStyle = gradientFill;
      context.fill();
    },
    afterDatasetsDraw: function (chart) {
      if (chart.config.lineAtIndex) {
        chart.config.lineAtIndex.forEach(pointIndex => this.changeLineColor(chart, pointIndex));
      }
    }
  };

有什么想法应该怎么做？