如何绘制chartJs的特定区域？

如何解决如何绘制chartJs的特定区域？

我有一个类似下面的折线图（没有任何颜色）

在此折线图中，我要给出颜色直到特定的y轴值。当它大于0时，从该值到顶部，应按如下所示应用渐变

要实现这一点，这是我的以下解决方案

 plugins: [
        {
          beforeRender: function (c,options) {
            var dataset = c.data.datasets[0];
            var yScale = c.scales['y-axis-0'];
            var yPos = yScale.getPixelForValue(0);
            let nonZeroPoint;
            for (var i = 0; i < dataset.data.length; i++) {
              if (dataset.data[i] != 0) {
                nonZeroPoint= dataset.data[i];
                break;
              }
            }
            const newHeight = (yPos * nonZeroPoint) / Math.max(...dataset.data);
            var gradientFill = c.ctx.createLinearGradient(0,yPos-newHeight,0);
            gradientFill.addColorStop(0.1,"#fff");
            gradientFill.addColorStop(1,"#7E0100");
            var model = c.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].$filler.el._model;
            model.backgroundColor = gradientFill;
          }
        }
      ]

在此解决方案中，yPos是图表的高度。 nonZeroPoint是通过for循环计算得出的值，以标识0之后的第一个数据值。

newHeight = (yPos * nonZeroPoint) / Math.max(...dataset.data);

此公式根据最高点的高度及其值计算nonZeroHeight的高度。 但是我没有得到预期的结果。在下面，我该如何解决？

Codepen：https://codepen.io/Cicek96/pen/GRZBgpN

解决方法

使用Plugin Core API中的afterLayout钩子，可以这样写：

plugins: [{
  afterLayout: c => {
    let dataset = c.data.datasets[0];
    let yScale = c.scales['y-axis-0'];
    let yBottom = yScale.getPixelForValue(0);
    let yGradientStart = yScale.getPixelForValue(dataset.data.find(v => v > 0));
    let yTop = yScale.getPixelForValue(Math.max(...dataset.data));
    let gradientFill = c.ctx.createLinearGradient(0,yBottom,yTop);
    gradientFill.addColorStop(0,"#fff");
    let offset = (yBottom - yGradientStart) / (yBottom - yTop);
    gradientFill.addColorStop(offset,"#fff");
    gradientFill.addColorStop(1,"#7E0100");
    dataset.backgroundColor = gradientFill;
  }
}],

请查看下面的可运行代码，并查看其工作原理。

new Chart("chart",{
  type: 'line',plugins: [{
    afterLayout: c => {
      let dataset = c.data.datasets[0];
      let yScale = c.scales['y-axis-0'];
      let yBottom = yScale.getPixelForValue(0);
      let yGradientStart = yScale.getPixelForValue(dataset.data.find(v => v > 0));
      let yTop = yScale.getPixelForValue(Math.max(...dataset.data));
      let gradientFill = c.ctx.createLinearGradient(0,yTop);
      gradientFill.addColorStop(0,"#fff");
      let offset = (yBottom - yGradientStart) / (yBottom - yTop); 
      gradientFill.addColorStop(offset,"#fff");
      gradientFill.addColorStop(1,"#7E0100");
      dataset.backgroundColor = gradientFill;
    }
  }],data: {
    labels: ["January","February","March","April","May","June","July"],datasets: [{
      label: "My First dataset",borderColor: '#7E0100',data: [0,120,200,350,0]
    }]
  },options: {
    scales: {
      yAxes: [{
        ticks: {
          max: 500,stepSize: 100
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="160"></canvas>