Javascript-Chart.js具有响应式渐变线填充

对你来说可能为时已晚,但我遇到了同样的问题.我解决它的方法是创建一个内联插件,每次布局更改时重新计算渐变,例如(调整大小,数据更改等)

var chart2 = new Chart(ctx, {
  plugins: [
    {
      id: "responsiveGradient",

      afterLayout: function(chart, options) {
        var scales = chart.scales;

        // create a linear gradient with the dimentions of the scale
        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;
      }
    }
  ]
});