如何在Chart.js中为Y轴设置双标题（含副标题）？

当然可以给Y轴添加双标题/副标题！Chart.js原生虽然没直接提供这个配置项，但有两种实用方法能搞定，我给你拆解下：

方法1：利用换行符快速实现（适合样式统一的场景） #

这是最简单的方式——直接在scaleLabel的labelString里用换行符\n分隔主副标题，就能实现两行文字的效果。如果对主副标题的样式要求不高，这个方法足够用了。

示例代码（以Chart.js v3+为例，v2版本只需把y改成yAxes: [{ ... }]）：

options: {
  scales: {
    y: {
      scaleLabel: {
        display: true,
        // 用\n分隔主副标题
        labelString: "月度销售额\n(单位: 万元)",
        font: {
          size: 14,
          weight: 'bold'
        },
        // 让文字右对齐，更贴合Y轴
        textAlign: 'right'
      }
    }
  }
}

缺点：主副标题的样式（字体大小、颜色、粗细）无法单独设置，只能统一应用。

方法2：自定义插件实现完全可控的双标题（适合需要差异化样式的场景） #

如果需要给主副标题设置不同的字体、颜色或位置，就需要用到Chart.js的自定义插件，通过beforeDraw钩子手动绘制第二个标题。这种方法灵活性拉满，能完全按照你的需求定制。

示例代码：

// 定义双标题插件
const yAxisDoubleLabelPlugin = {
  beforeDraw: function(chart) {
    const ctx = chart.ctx;
    const yAxis = chart.scales.y;
    
    // 计算副标题的位置（和主标题错开一段距离）
    const mainLabelCenterY = yAxis.top + (yAxis.height / 2);
    const subLabelY = mainLabelCenterY + 20; // 调整上下间距
    const xPosition = yAxis.left - 60; // 调整横向位置，靠近Y轴
    
    // 绘制副标题，单独设置样式
    ctx.save();
    ctx.font = '12px sans-serif'; // 比主标题小一号
    ctx.fillStyle = '#666'; // 灰色更柔和
    ctx.textAlign = 'right';
    ctx.fillText('(单位: 万元)', xPosition, subLabelY);
    ctx.restore();
  }
};

// 初始化图表时注册插件
new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['1月', '2月', '3月'],
    datasets: [{ data: [120, 190, 300] }]
  },
  options: {
    scales: {
      y: {
        scaleLabel: {
          display: true,
          labelString: '月度销售额',
          font: {
            size: 16,
            weight: 'bold'
          },
          textAlign: 'right'
        }
      }
    }
  },
  plugins: [yAxisDoubleLabelPlugin]
});

注意事项： #

• 位置数值（比如20、60）需要根据你的图表尺寸微调，确保在不同屏幕下显示正常；
• 如果是Chart.js v2版本，chart.scales.y要改成chart.scales['y-axis-0']（默认Y轴ID），同时scales配置要写成yAxes: [{ ... }]。

内容的提问来源于stack exchange，提问作者JF-Mechs