我试图在插件下为我的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
                    }
                  }]
                }
            },

        });