Chart.js：如何使居中坐标轴的标签保留在图表外边框

在Chart.js中，我可以通过设置options -> scales -> x -> position属性创建坐标轴居中的散点图，但这样设置后，轴标签也会移到图表中心。请问如何实现坐标轴和刻度居中，同时让轴标签保留在图表外边框？

示例配置代码：

const sampleConfig = {
  type: 'scatter',
  data: data,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Axis Center Positioning'
      }
    },
    scales: {
      x: {
        min: -100,
        max: 100,
        title: { display: true, text: 'X-Label' }
      },
      y: {
        min: -100,
        max: 100,
        title: { display: true, text: 'Y-Label' }
      }
    }
  }
};

方法1：单独配置轴标题的位置 #

Chart.js允许单独设置轴标题的位置，不受坐标轴position属性影响，直接给轴标题指定外边框方向的位置即可：

const sampleConfig = {
  type: 'scatter',
  data: data,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Axis Center Positioning'
      }
    },
    scales: {
      x: {
        min: -100,
        max: 100,
        position: 'center', // 坐标轴居中
        title: { 
          display: true, 
          text: 'X-Label',
          position: 'end', // 标签固定在轴的末端（底部外边框）
          align: 'end'
        }
      },
      y: {
        min: -100,
        max: 100,
        position: 'center', // 坐标轴居中
        title: { 
          display: true, 
          text: 'Y-Label',
          position: 'end', // 标签固定在轴的末端（左侧外边框）
          align: 'end'
        }
      }
    }
  }
};

方法2：自定义插件手动调整标签位置 #

如果方法1的默认配置不够灵活，可通过自定义插件直接控制标签的渲染坐标：

const sampleConfig = {
  type: 'scatter',
  data: data,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Axis Center Positioning'
      },
      customLabelPosition: {
        afterDraw: (chart) => {
          // 处理X轴标签，移到图表底部外边框居中位置
          const xAxisTitle = chart.scales.x.title;
          if (xAxisTitle.display) {
            chart.ctx.fillStyle = chart.scales.x.options.color;
            chart.ctx.textAlign = 'center';
            chart.ctx.fillText(
              xAxisTitle.text,
              chart.width / 2,
              chart.height - 15 // 距离底部15px
            );
            xAxisTitle.display = false; // 隐藏默认渲染的标签
          }

          // 处理Y轴标签，移到图表左侧外边框居中位置并旋转
          const yAxisTitle = chart.scales.y.title;
          if (yAxisTitle.display) {
            chart.ctx.fillStyle = chart.scales.y.options.color;
            chart.ctx.textAlign = 'center';
            chart.ctx.save();
            chart.ctx.translate(15, chart.height / 2); // 距离左侧15px，垂直居中
            chart.ctx.rotate(-Math.PI / 2);
            chart.ctx.fillText(yAxisTitle.text, 0, 0);
            chart.ctx.restore();
            yAxisTitle.display = false; // 隐藏默认渲染的标签
          }
        }
      }
    },
    scales: {
      x: {
        min: -100,
        max: 100,
        position: 'center',
        title: { display: true, text: 'X-Label' }
      },
      y: {
        min: -100,
        max: 100,
        position: 'center',
        title: { display: true, text: 'Y-Label' }
      }
    }
  },
  plugins: [{ id: 'customLabelPosition' }]
};

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