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

igsr9ssn  于 2023-04-06  发布在  Chart.js
关注(0)|答案(2)|浏览(327)

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

        });
ar7v8xwq

ar7v8xwq1#

问题出在plugins.afterLayout函数的最后一行。没有像chart.data这样的对象,请使用chart.config.data

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

请看看下面修改后的代码(我不得不对您的数据进行假设)。
x一个一个一个一个x一个一个二个x

nwwlzxa7

nwwlzxa72#

对我来说,这个错误的原因是trendlineLinear属性,因为我也试图将trendlineLinear用于单个项目数组。

series={[
           {
            data: dataArray,
            label: 'some label name',
            trendlineLinear: **dataArray.length > 1** && {
            lineStyle: 'dotted',
             width: 2
            }
         ]}

相关问题