如何在Chart.js中把X、Y轴标签分组显示在左下角？

Chart.js 4.x原生确实没有内置的轴标签分组配置项，但可以通过自定义插件来实现你想要的效果。下面是具体的实现步骤：

1. 自定义绘制分组标签的插件 #

通过Chart.js的插件机制，在图表绘制完成后，在坐标轴交叉区域手动绘制分组标签：

const axisGroupLabelPlugin = {
  id: 'axisGroupLabel',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    const xAxis = chart.scales.x;
    const yAxis = chart.scales.y;
    
    // 计算分组标签的绘制位置（可根据图表尺寸微调）
    const groupLabelX = xAxis.left - 60;
    const groupLabelY = yAxis.bottom + 30;
    
    // 设置文本样式
    ctx.font = 'bold 14px Arial';
    ctx.fillStyle = chart.options.color || '#333';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // 绘制分组标签（示例为"Time"，替换成你需要的分组名）
    ctx.fillText('Time', groupLabelX, groupLabelY);
  }
};

2. 修改图表配置 #

将插件加入图表配置，并调整原有轴标题的位置，避免和分组标签重叠：

{
  plugins: [axisGroupLabelPlugin],
  scales: {
    x: {
      title: {
        display: true,
        text: 'Day',
        align: 'start',
        position: 'bottom',
        padding: { top: 10 } // 给分组标签留出空间
      },
      ticks: {
        padding: 5
      }
    },
    y: {
      title: {
        display: true,
        text: 'Min',
        align: 'end',
        position: 'left',
        padding: { right: 10 } // 给分组标签留出空间
      },
      ticks: {
        padding: 5
      }
    }
  }
}

关键说明 #

• 插件的afterDraw钩子会在图表绘制完成后执行，直接操作Canvas上下文绘制自定义文本。
• 坐标值（groupLabelX、groupLabelY）需要根据你的实际图表尺寸微调，确保分组标签位置合适。
• 调整轴标题的padding和align属性，是为了让原有轴标签和分组标签不重叠，保持布局整洁。

如果需要更复杂的分组样式（比如添加背景框），可以在插件中补充Canvas绘制矩形的逻辑：

// 绘制文本前先画背景矩形
ctx.fillStyle = '#f5f5f5';
ctx.fillRect(groupLabelX - 40, groupLabelY - 10, 80, 20);

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