如何在调整 Chart.js / canvas 上修复背景渐变答案

【问题标题】：How to fix background gradiend on resize Chart.js / canvas如何在调整 Chart.js / canvas 上修复背景渐变
【发布时间】：2021-08-19 03:01:42
【问题描述】：

我正在使用react chart js来显示折线图。

我的渐变背景在调整窗口大小时被破坏，变成黑色：

如何通过改变屏幕大小使其工作？

这是创建和生成渐变的函数：

export const getGradientBackground = (canvas) => {
    const ctx = canvas.getContext('2d');

    const gradient = ctx.createLinearGradient(
        canvas.width / 2,
        0,
        canvas.width / 2,
        canvas.height
    );

    gradient.addColorStop(0.1, 'rgba(0, 145, 148, 0.15)');
    gradient.addColorStop(0.2, 'rgba(0, 145, 148, 0.15)');
    gradient.addColorStop(0.3, 'rgba(0, 145, 148, 0.15)');
    gradient.addColorStop(0.4, 'rgba(255, 255, 255, 0.15)');
    gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.15)');
    gradient.addColorStop(0.6, 'rgba(255, 255, 255, 0.15)');
    gradient.addColorStop(0.7, 'rgba(255, 255, 255, 0.15)');
    gradient.addColorStop(0.8, 'rgba(255, 255, 255, 0.15)');
    gradient.addColorStop(0.9, 'rgba(255, 255, 255, 0.15)');
    gradient.addColorStop(1.0, 'rgba(255, 255, 255, 0.15)');

    ctx.fillStyle = gradient;
    ctx.fillRect(10, 10, 200, 100);

    return gradient;
};

欢迎评论

【问题讨论】：

如果您有一个可重现的示例，例如 stackblitz 之类的，这可能是一个简单的补救措施，但在示例中查看问题以进行故障排除将有很长的路要走。我认为这是你的fillRect 声明的罪魁祸首，你可以使用chartArea 接口like this
你在用这个包吗？ npmjs.com/package/react-chartjs-2
嗨 @MarkJames，类似于 Chris 的请求，如果能看到一个我们可以修补以开始工作的实时工作示例将非常有帮助，以确保我们为该问题提供真正有效的解决方案你正在经历。

标签： javascript css reactjs canvas charts

【解决方案1】：

我在使用 apexcharts.js（类似于 Chart.js）时遇到了同样的问题，我必须为使用 SVG 的 y 轴添加背景颜色（您也可以对画布执行相同操作）。

由于动态添加 svg 元素或在调整窗口大小时绘制画布，这会使该元素消失，因为我使用了 resize 事件，该事件会在 500 毫秒后触发一个函数来重新添加该元素。

只要窗口尺寸发生变化（因为我们清除超时），这个 500 毫秒的计数器就会重新启动，因此只有在用户停止调整窗口大小或用户非常缓慢地调整窗口大小时才会调用该函数不会正常发生。

这对你有用

var func;

window.addEventListener("resize", function(){
  clearTimeout(func);
func = setTimeout(getGradientBackground, 500);
})

【讨论】：

【解决方案2】：

我按照评论中Chris W提供的链接，用react-chartjs-2实现了它

...
      <Line
        type="line"
        data={data}
        options={options}
        plugins={[
          {
            beforeDraw: function (chart, args, options) {
              const ctx = chart.ctx;
              const canvas = chart.canvas;
              const chartArea = chart.chartArea;

              // Chart background
              var gradient = canvas
                .getContext("2d")
                .createLinearGradient(
                  canvas.width / 2,
                  0,
                  canvas.width / 2,
                  canvas.height
                );
              gradient.addColorStop(0.1, "rgba(0, 145, 148, 0.15)");
              gradient.addColorStop(0.2, "rgba(0, 145, 148, 0.15)");
              gradient.addColorStop(0.3, "rgba(0, 145, 148, 0.15)");
              gradient.addColorStop(0.4, "rgba(255, 255, 255, 0.15)");
              gradient.addColorStop(0.5, "rgba(255, 255, 255, 0.15)");
              gradient.addColorStop(0.6, "rgba(255, 255, 255, 0.15)");
              gradient.addColorStop(0.7, "rgba(255, 255, 255, 0.15)");
              gradient.addColorStop(0.8, "rgba(255, 255, 255, 0.15)");
              gradient.addColorStop(0.9, "rgba(255, 255, 255, 0.15)");
              gradient.addColorStop(1.0, "rgba(255, 255, 255, 0.15)");

              ctx.fillStyle = gradient;
              ctx.fillRect(
                chartArea.left,
                chartArea.bottom,
                chartArea.right - chartArea.left,
                chartArea.top - chartArea.bottom
              );
            }
          }
        ]}
      />
...

正如您在此codesandbox 中看到的，当您调整屏幕大小时，背景仍然存在。问题可能是您没有考虑图表尺寸来计算背景矩形尺寸

【讨论】：

如果您希望 createLinearGradient 中的“250”保持相对于画布的大小，则需要更改它。