无法在“CanvasRenderingContext2D”上执行“createLinearGradient”：提供的双精度值是非有限的答案

【问题标题】：Failed to execute 'createLinearGradient' on 'CanvasRenderingContext2D': The provided double value is non-finite无法在“CanvasRenderingContext2D”上执行“createLinearGradient”：提供的双精度值是非有限的
【发布时间】：2020-04-26 22:49:47
【问题描述】：

我正在尝试在我的 chartJs 图表的插件下创建一个线性渐变。不幸的是，我收到一个名为：

的错误

在“CanvasRenderingContext2D”上执行“createLinearGradient”失败：提供的双精度值是非有限的。

我正在尝试在插件中添加我的 linearGradient，因为我希望该渐变在每个比例上对齐。

这是我在下面尝试过的

 barChart = new Chart(elem, {
            plugins: [
                {
                  id: "responsiveGradient",

                  afterLayout: function(chart, options) {
                   var scales = chart.scales;
                    var color = chart.ctx.createLinearGradient(
                       scales["x-axis-0"].left,
                      scales["y-axis-0"].bottom,
                      scales["x-axis-0"].right,
                      scales["y-axis-0"].top  
                    );
                    // add gradients stops
                    color.addColorStop(0, "black");
                    color.addColorStop(0.25, "red");
                    color.addColorStop(0.5, "orange");
                    color.addColorStop(0.75, "yellow");
                    color.addColorStop(1, "green");
                    // changes the background color option
                    chart.data.datasets[0].backgroundColor = color; 
                  }
                }
              ],
            type: 'horizontalBar',
            data: datasets,
            options: {
                maintainAspectRatio: false,
                tooltips: { enabled: false },
                title: {
                  display: false,
                },
                responsive: true,
                legend: {
                  display: false,
                  position: "top"
                },
                scales: {
                  xAxes: [{
                    ticks: {
                      beginAtZero: false,
                      min:0.5,
                      max:0.8,
                      maxTicksLimit: 6,
                    },
                    scaleLabel: {
                      display: false
                    },
                    barThickness: 5,
                    gridLines: {
                      display: false,
                      zeroLineColor: "transparent",
                    }
                  }],

                  yAxes: [{
                    barThickness: 5,
                    ticks: {
                      maxTicksLimit: 6,
                      padding: 15,
                    },
                    gridLines: {
                      drawTicks: false,
                      display: false
                    }
                  }]
                }
            },

        });

【问题讨论】：

在 afterLayout 方法中，在调用 createLinearGradient 之前，执行 console.log(scales["x-axis-0"].left, scales["y-axis-0"].bottom, scales["x-axis-0"].right, scales["y-axis-0"].top) 并检查输出的内容。

标签： javascript chart.js

【解决方案1】：

问题出在plugins.afterLayout 函数的最后一行。没有chart.data等对象，改用chart.config.data。

// chart.data.datasets[0].backgroundColor = color;  // replace this line
chart.config.data.datasets[0].backgroundColor = color;

请在下面查看您修改后的代码（我不得不对您的数据做出假设）。

const datasets = {
  labels: ['A', 'B', 'C'],
  datasets: [{
    label: 'data',
    data: [0.6, 0.7, 0.8],
    barThickness: 5
  }]
};

new Chart("myChart", {
  plugins: [{
    id: "responsiveGradient",
    afterLayout: (chart, options) => {
      var scales = chart.scales;
      var color = chart.chart.ctx.createLinearGradient(
        scales["x-axis-0"].left,
        scales["y-axis-0"].bottom,
        scales["x-axis-0"].right,
        scales["y-axis-0"].top
      );
      // add gradients stops
      color.addColorStop(0, "black");
      color.addColorStop(0.25, "red");
      color.addColorStop(0.5, "orange");
      color.addColorStop(0.75, "yellow");
      color.addColorStop(1, "green");
      // changes the background color option
      chart.config.data.datasets[0].backgroundColor = color;
    }
  }],
  type: 'horizontalBar',
  data: datasets,
  options: {
    maintainAspectRatio: false,
    tooltips: {
      enabled: false
    },
    title: {
      display: false,
    },
    responsive: true,
    legend: {
      display: false,
      position: "top"
    },
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: false,
          min: 0.5,
          max: 0.8,
          maxTicksLimit: 6,
        },
        scaleLabel: {
          display: false
        },            
        gridLines: {
          display: false,
          zeroLineColor: "transparent",
        }
      }],
      yAxes: [{
        ticks: {
          maxTicksLimit: 6,
          padding: 15,
        },
        gridLines: {
          drawTicks: false,
          display: false
        }
      }]
    }
  }
});

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

【讨论】：