如何繪制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);

該公式根據頂點的高度及其值計算非零高度的高度。 但是我無法得到預期的結果。它在下面。我該如何解決？

代碼筆： https ://codepen.io/Cicek96/pen/GRZBgpN

Answer 1

使用來自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, 0, 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, yBottom, 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, 200, 120, 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>