Chart.js新手咨询：能否在单个画布内实现多图表共享X轴与提示框？

作为Chart.js的老用户，我可以明确告诉你，通过一些灵活的配置就能搞定你要的效果——单个canvas里垂直排列多个子图表、共享X轴、还有类似Highcharts的共享提示框。我给你拆解具体怎么做：

核心思路 #

我们不需要创建多个Chart实例，而是在同一个Canvas的单个Chart实例里，用多个数据集分别对应每个子图表，再通过自定义Y轴布局实现垂直分隔，最后配置tooltip实现共享悬停效果。

完整代码示例 #

下面是一个可直接运行的示例，用折线图演示（换成柱状图也一样适配）：

const ctx = document.getElementById('multiChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    // 共享的X轴标签
    labels: ['1月', '2月', '3月', '4月', '5月'],
    datasets: [
      // 第一个子图表的数据集
      {
        label: '图表1',
        data: [12, 19, 15, 23, 27],
        yAxisID: 'y-axis-1', // 绑定到第一个Y轴
        borderColor: '#ff6384',
        backgroundColor: 'rgba(255,99,132,0.1)',
        fill: true,
        tension: 0.4
      },
      // 第二个子图表的数据集
      {
        label: '图表2',
        data: [5, 10, 8, 14, 18],
        yAxisID: 'y-axis-2', // 绑定到第二个Y轴
        borderColor: '#36a2eb',
        backgroundColor: 'rgba(54,162,235,0.1)',
        fill: true,
        tension: 0.4
      },
      // 第三个子图表的数据集
      {
        label: '图表3',
        data: [1, 4, 3, 6, 8],
        yAxisID: 'y-axis-3', // 绑定到第三个Y轴
        borderColor: '#4bc0c0',
        backgroundColor: 'rgba(75,192,192,0.1)',
        fill: true,
        tension: 0.4
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    layout: {
      padding: { top: 15, bottom: 15 } // 给顶部底部留些空间
    },
    scales: {
      // 共享的X轴
      x: {
        position: 'bottom',
        grid: { display: false }, // 去掉X轴网格线，让布局更清爽
        ticks: { color: '#666' }
      },
      // 第一个Y轴（对应图表1）
      'y-axis-1': {
        type: 'linear',
        position: 'left',
        height: '30%', // 占画布高度的30%
        offset: true, // 开启偏移避免和其他Y轴重叠
        grid: { display: false },
        ticks: { color: '#ff6384' }
      },
      // 第二个Y轴（对应图表2）
      'y-axis-2': {
        type: 'linear',
        position: 'left',
        height: '30%',
        offset: true,
        grid: { display: false },
        ticks: { color: '#36a2eb' },
        min: 0 // 强制从0开始，保证图表比例一致
      },
      // 第三个Y轴（对应图表3）
      'y-axis-3': {
        type: 'linear',
        position: 'left',
        height: '30%',
        offset: true,
        grid: { display: false },
        ticks: { color: '#4bc0c0' },
        min: 0
      }
    },
    // 关键：配置共享提示框（类似Highcharts的tooltip.shared）
    plugins: {
      tooltip: {
        mode: 'index', // 鼠标悬停时，显示同一X轴索引下所有数据集的数据
        intersect: false, // 不需要精确点击到数据点，鼠标在X轴范围内就触发
        backgroundColor: 'rgba(0,0,0,0.8)',
        padding: 12,
        // 自定义提示框内容，让信息更清晰
        callbacks: {
          title: (context) => `月份：${context[0].label}`,
          label: (context) => `${context.dataset.label}：${context.raw}`
        }
      }
    }
  }
});

关键配置说明 #

1. 垂直布局实现：给每个子图表绑定独立的Y轴，通过height属性分配每个Y轴的画布占比（比如30%），offset: true确保Y轴刻度不会互相重叠。
2. 共享X轴：只配置一个X轴，所有数据集默认关联这个X轴（不需要额外指定xAxisID）。
3. 共享提示框：设置tooltip.mode: 'index'就实现了核心的共享效果——鼠标悬停在任意X轴位置时，所有子图表的对应数据都会显示在同一个提示框里，完美匹配你要的Highcharts效果。

优化小技巧 #

• 如果需要在子图表之间添加分隔线，可以引入chartjs-plugin-annotation插件，添加水平线条来区分每个子图表区域。
• 如果用柱状图，记得设置indexAxis: 'x'，并调整barPercentage参数避免柱子重叠。
• 可以通过调整Y轴的min/max来统一每个子图表的刻度范围，让视觉更协调。

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