Chart.js折线图chartArea.backgroundColor配置不生效问题求助

失效原因 #

Chart.js 原生配置项中不存在 options.chartArea.backgroundColor 这个属性，这是配置不生效的核心原因。

正确实现方案 #

如果仅需要设置坐标轴内部的图表绘制区域背景色，通过自定义内嵌插件实现即可，代码修改如下：

options={{
  maintainAspectRatio: false,
  title: {
    display: true,
    fontSize: 20
  },
  // 新增plugins配置项，插入自定义背景绘制插件
  plugins: [{
    id: 'customChartBg',
    beforeDraw: (chart) => {
      const { ctx, chartArea } = chart;
      ctx.save();
      ctx.fillStyle = "blue";
      ctx.fillRect(chartArea.left, chartArea.top, chartArea.width, chartArea.height);
      ctx.restore();
    }
  }]
}}

补充说明 #

如果你需要给包含标题、坐标轴留白的整个画布区域设置背景，直接给渲染图表的canvas元素添加CSS background-color 属性即可，无需使用插件。

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