无法在“CanvasRenderingContext2D”上执行

Question

我正在尝试在我的 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,

                    },

Answer 1

问题出在plugins.afterLayout函数的最后一行。没有诸如chart.data, usechart.config.data之类的对象。// chart.data.datasets[0].backgroundColor = color;&nbsp; // replace this linechart.config.data.datasets[0].backgroundColor = color;请在下面查看您修改后的代码（我不得不对您的数据做出假设）。const datasets = {&nbsp; labels: ['A', 'B', 'C'],&nbsp; datasets: [{&nbsp; &nbsp; label: 'data',&nbsp; &nbsp; data: [0.6, 0.7, 0.8],&nbsp; &nbsp; barThickness: 5&nbsp; }]};new Chart("myChart", {&nbsp; plugins: [{&nbsp; &nbsp; id: "responsiveGradient",&nbsp; &nbsp; afterLayout: (chart, options) => {&nbsp; &nbsp; &nbsp; var scales = chart.scales;&nbsp; &nbsp; &nbsp; var color = chart.chart.ctx.createLinearGradient(&nbsp; &nbsp; &nbsp; &nbsp; scales["x-axis-0"].left,&nbsp; &nbsp; &nbsp; &nbsp; scales["y-axis-0"].bottom,&nbsp; &nbsp; &nbsp; &nbsp; scales["x-axis-0"].right,&nbsp; &nbsp; &nbsp; &nbsp; scales["y-axis-0"].top&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; // add gradients stops&nbsp; &nbsp; &nbsp; color.addColorStop(0, "black");&nbsp; &nbsp; &nbsp; color.addColorStop(0.25, "red");&nbsp; &nbsp; &nbsp; color.addColorStop(0.5, "orange");&nbsp; &nbsp; &nbsp; color.addColorStop(0.75, "yellow");&nbsp; &nbsp; &nbsp; color.addColorStop(1, "green");&nbsp; &nbsp; &nbsp; // changes the background color option&nbsp; &nbsp; &nbsp; chart.config.data.datasets[0].backgroundColor = color;&nbsp; &nbsp; }&nbsp; }],&nbsp; type: 'horizontalBar',&nbsp; data: datasets,&nbsp; options: {&nbsp; &nbsp; maintainAspectRatio: false,&nbsp; &nbsp; tooltips: {&nbsp; &nbsp; &nbsp; enabled: false&nbsp; &nbsp; },&nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; display: false,&nbsp; &nbsp; },&nbsp; &nbsp; responsive: true,&nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; display: false,&nbsp; &nbsp; &nbsp; position: "top"&nbsp; &nbsp; },&nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beginAtZero: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; min: 0.5,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max: 0.8,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxTicksLimit: 6,&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; scaleLabel: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: false&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; gridLines: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; zeroLineColor: "transparent",&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxTicksLimit: 6,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 15,&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; gridLines: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; drawTicks: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: false&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="myChart" height="100"></canvas>