Chart.js折线图如何设置内边距并通过Annotation绘制背景框

全局padding不生效解决方案 #

你当前使用的全局layout.padding配置是Chart.js v2版本的简写写法，v3及之后版本需要明确指定四个方向的边距，若你需要的是横轴2019、2021标签和图表边界预留间距，更推荐使用坐标轴offset配置，完整示例如下：

options: {
  layout: {
    // 全局画布内边距配置（v3+写法）
    padding: {
      left: 20,
      right: 20,
      top: 20,
      bottom: 20
    }
  },
  scales: {
    x: {
      // 明确横轴范围
      min: '2019',
      max: '2021',
      // 开启坐标轴两端偏移，自动给最左最右标签预留间距
      offset: true,
      // 也可以单独配置坐标轴区域内边距
      padding: 15
    }
  }
}

Annotation背景框不生效解决方案 #

首先确认你已经完成annotation插件的注册：该插件为Chart.js第三方扩展，不会默认内置，npm安装后需要手动注册：

import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);

使用CDN引入则需要先加载annotation的对应JS文件，再初始化图表。

其次你当前的annotation配置有两处版本兼容问题：一是配置需要放在options.plugins层级下，二是默认坐标轴ID在v3+版本下为x、y，不需要用旧版本的x-axis-1格式，修正后的配置如下：

options: {
  plugins: {
    annotation: {
      annotations: {
        customBgBox: {
          drawTime: "beforeDatasetsDraw",
          type: "box",
          xScaleID: "x",
          yScaleID: "y",
          // 若x轴为时间类型，此处直接填对应的时间值即可覆盖全横轴
          xMin: '2019',
          xMax: '2021',
          yMin: 0,
          yMax: 200,
          backgroundColor: "rgba(0, 128, 0, 0.8)",
          borderWidth: 0
        }
      }
    }
  }
}

如果你的x轴为时间类型，还需要额外注册对应时间适配器（比如chartjs-adapter-date-fns、chartjs-adapter-moment），否则时间范围配置会不生效。

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