如何使用图表按颜色填充图形直到垂直线.js

Question

在此处输入图像描述我正在尝试使用图表在折线图中显示垂直线.js。我用小提琴作为参考。

var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
  draw: function() {
    originalLineDraw.apply(this, arguments);
    var chart = this.chart;
    var ctx = chart.chart.ctx;
    var index = chart.config.data.lineAtIndex;
    if (index) {
      var xaxis = chart.scales['x-axis-0'];
      var yaxis = chart.scales['y-axis-0'];
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
      ctx.strokeStyle = '#ff0000';
      ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
      ctx.stroke();
      ctx.restore();
    }
  }
});
var config = {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First dataset",
      data: [65, 0, 80, 81, 56, 85, 40],
      fill: false
    }],
    lineAtIndex: 2
  }
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

在这种情况下，我想动态地将值传递给 Line At Index，并且我还想将图形变灰，直到该垂直线。例如，如果线条位于位置 3，我想在该位置之前应用一些颜色。

Answer 1

您可以将数据集拆分为 2，只需将有面积的部分的填充属性设置为 true，将没有面积的部分的填充属性设置为 false。新数据集将显示如下：

datasets: [{
      label: "My First dataset",
      data: [65, 0, 80],
      fill: true
    }, {
      label: "My First dataset",
      data: [null, null, 80, 81, 56, 85, 40],
      fill: false
    }
]