Javascript 如何在resize Chart.js/canvas上修复背景渐变

我使用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;
};

---

欢迎发表任何评论

当我使用apexcharts.js（类似于Chart.js）时，我也遇到了同样的问题，我必须为y轴添加背景色，因为我使用了SVG（你也可以对画布做同样的事情）

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

每当窗口的尺寸发生变化时（当我们清除超时时），这个500毫秒的计数器就会重新启动，因此只有当用户停止调整窗口大小，或者如果用户调整窗口大小非常慢（这不是正常情况），才会调用该函数

这对你有用

---

我遵循了评论中提供的链接，并使用

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
              );
            }
          }
        ]}
      />
...

。。。
...

---

如图所示，当您调整屏幕大小时，背景仍然存在。可能问题在于，在计算背景矩形尺寸时，您没有考虑图表尺寸

如果您有一个可复制的示例，例如stackblitz或其他东西，这可能是一个简单的补救方法，但在一个示例中看到问题以进行故障排除将大有帮助。我假设是您的

fillRect

声明导致您可能使用

chartArea

接口，您是否正在使用此软件包？您好@MarkJames，与Chris的请求类似，如果能看到这样一个实时工作的示例，我们可以对其进行修补，以确保为您遇到的问题提供真正的工作解决方案，这将非常有帮助。如果您希望createLinearGradient中的“250”与画布的大小保持相对，则需要对其进行更改。

...
      <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
              );
            }
          }
        ]}
      />
...