通过Chart.register设置的图表背景色影响其他组件图表如何修复

你调用的Chart.register()属于Chart.js的全局插件注册API，注册成功后项目内所有Chart.js生成的图表都会默认执行这个背景绘制逻辑，自然会影响其他组件的图表。

方案1：插件绑定单个图表（最优解） #

删除原有的全局注册逻辑，将背景插件直接传给需要生效的单个图表的plugins配置项，只会对当前图表生效：

// 单独定义背景插件，不做全局注册
const customBgPlugin = {
  id: "custom_canvas_background_color",
  beforeDraw: (chart) => {
    const ctx = chart.canvas.getContext("2d");
    ctx.save();
    ctx.globalCompositeOperation = "destination-over";
    ctx.fillStyle = "lightblue";
    ctx.fillRect(0, 0, chart.width, chart.height);
    ctx.restore();
  }
};

// 在App.js的图表组件配置中传入该插件
// 以react-chartjs-2为例
<Bar
  data={chartData}
  options={chartOptions}
  plugins={[customBgPlugin]}
/>

方案2：给全局插件加执行判断 #

如果需要保留全局注册的写法，可在插件逻辑中增加自定义开关判断，只有指定配置的图表才会绘制背景：

useEffect(() => {
  Chart.register({
    id: "custom_canvas_background_color",
    beforeDraw: (chart) => {
      // 仅当图表配置开启enableCustomBg时才执行绘制
      if (!chart.options?.enableCustomBg) return;
      const ctx = chart.canvas.getContext("2d");
      ctx.save();
      ctx.globalCompositeOperation = "destination-over";
      ctx.fillStyle = "lightblue";
      ctx.fillRect(0, 0, chart.width, chart.height);
      ctx.restore();
    }
  });
}, []);

需要加背景的App.js图表增加对应配置即可：

const chartOptions = {
  // 其他原有配置不变
  enableCustomBg: true
}

其他组件的图表不需要加该配置，不会触发背景绘制。

内容的提问来源于stack exchange，提问作者JS3