如何绘制 chartJs 的特定区域？

Question

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

在这个折线图中，我想给颜色直到特定的 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, 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 的高度。但是我无法获得预期的结果。下面是它。我该如何解决？

代码笔： https: //codepen.io/Cicek96/pen/GRZBgpN

Answer 1

使用Plugin Core APIafterLayout中的钩子，这可以写成如下：new Chart("chart", {&nbsp; type: 'line',&nbsp; plugins: [{&nbsp; &nbsp; afterLayout: c => {&nbsp; &nbsp; &nbsp; let dataset = c.data.datasets[0];&nbsp; &nbsp; &nbsp; let yScale = c.scales['y-axis-0'];&nbsp; &nbsp; &nbsp; let yBottom = yScale.getPixelForValue(0);&nbsp; &nbsp; &nbsp; let yGradientStart = yScale.getPixelForValue(dataset.data.find(v => v > 0));&nbsp; &nbsp; &nbsp; let yTop = yScale.getPixelForValue(Math.max(...dataset.data));&nbsp; &nbsp; &nbsp; let gradientFill = c.ctx.createLinearGradient(0, yBottom, 0, yTop);&nbsp; &nbsp; &nbsp; gradientFill.addColorStop(0, "#fff");&nbsp; &nbsp; &nbsp; let offset = (yBottom - yGradientStart) / (yBottom - yTop);&nbsp;&nbsp; &nbsp; &nbsp; gradientFill.addColorStop(offset, "#fff");&nbsp; &nbsp; &nbsp; gradientFill.addColorStop(1, "#7E0100");&nbsp; &nbsp; &nbsp; dataset.backgroundColor = gradientFill;&nbsp; &nbsp; }&nbsp; }],&nbsp; data: {&nbsp; &nbsp; labels: ["January", "February", "March", "April", "May", "June", "July"],&nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; label: "My First dataset",&nbsp; &nbsp; &nbsp; borderColor: '#7E0100',&nbsp; &nbsp; &nbsp; data: [0, 120, 200, 350, 200, 120, 0]&nbsp; &nbsp; }]&nbsp; },&nbsp; options: {&nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max: 500,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stepSize: 100&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; }&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><canvas id="chart" height="160"></canvas>