如何在调整大小时修复背景渐变 Chart.js / canvas

Question

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

我的渐变背景在调整大小 window 屏幕上损坏，变成黑色：

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

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

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;
};

欢迎任何评论

Answer 1

我在使用 apexcharts.js 时遇到了同样的问题（类似于 Chart.js）我不得不为我使用 SVG 的 y 轴添加背景颜色（你也可以这样做canvas).

由于动态附加一个 svg 元素或绘制一个 canvas 如果 window 被调整大小，它会使该元素消失，为此我使用了 resize 事件，它会在 500 毫秒后触发一个函数重新添加该元素。

只要 window 的尺寸发生变化（当我们清除超时）时，这个 500 毫秒的计数器就会重新启动，因此只有在用户停止调整 [=23] 的大小时才会调用该函数=] 或者如果用户调整 window 的大小非常缓慢，这通常不会发生。

这对你有用

var func;

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

Answer 2

我按照Chris W在评论中提供的link，用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 中所见，当您调整屏幕大小时，背景仍然存在。问题可能是您没有考虑图表尺寸来计算背景矩形尺寸

如何在调整大小时修复背景渐变 Chart.js / canvas

How to fix background gradiend on resize Chart.js / canvas

javascript

css

charts

canvas

reactjs

这对你有用