Chart.js折线图定制求助：网格、轴标签及边框设置

问题1：设置背景网格为虚线 #

Chart.js v3+版本中，网格配置从gridLines改为grid对象，需在对应轴的grid属性下配置borderDash（控制虚线段与间隔的长度）和color。注意X轴的配置方式已从数组改为对象（v3+不再支持xAxes数组写法）。

问题2：让X轴'CP'刻度标签与Y轴刻度线对齐 #

默认X轴的刻度会启用offset: true，导致第一个标签偏右显示。只需将X轴的offset设为false，同时确保ticks.align为'center'，即可让标签与Y轴刻度线对齐。

问题3：添加黑色实线外边框 #

通过自定义插件的beforeDraw钩子，在图表绘制前，利用Canvas API在图表区域边缘绘制黑色实线边框，无需依赖额外CSS样式。

修改后的完整代码 #

function createChartConfig(ctx) {
  return {
    type: "line",
    data: {
      labels: ["CP", "NP", "A", "FC", "AC"],
      datasets: [
        {
          label: "My Dataset",
          data: [35, 60, 40, 55, 85],
          backgroundColor: "rgba(135, 206, 250, 0.2)",
          borderColor: "rgba(0, 0, 255, 1)",
          borderWidth: 3,
          pointBackgroundColor: "rgba(0, 0, 255, 1)",
          pointBorderColor: "#fff",
          pointBorderWidth: 2,
          pointRadius: 5,
          fill: false,
          tension: 0.1,
          borderDash: [6, 6],
        },
      ],
    },
    options: {
      responsive: true,
      scales: {
        y: {
          type: "linear",
          min: 0,
          max: 100,
          ticks: {
            stepSize: 5,
          },
          // Y轴网格虚线配置
          grid: {
            borderDash: [8, 4],
            color: "#348632",
          },
        },
        x: {
          // 关闭X轴刻度偏移，让第一个标签对齐Y轴
          offset: false,
          ticks: {
            align: 'center'
          },
          // X轴网格虚线配置
          grid: {
            borderDash: [8, 4],
            color: "#348632",
          },
        },
      },
      layout: {
        padding: {
          top: 10,
          right: 10,
          bottom: 10,
          left: 10,
        },
      },
      elements: {
        line: {
          borderWidth: 2,
        },
        point: {
          radius: 5,
        },
      },
    },
    // 自定义插件绘制外边框
    plugins: [{
      beforeDraw: (chart) => {
        const ctx = chart.ctx;
        const { left, top, width, height } = chart.chartArea;
        ctx.save();
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 2;
        ctx.strokeRect(left, top, width, height);
        ctx.restore();
      }
    }]
  };
}

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