Apex Charts双图表同步缩放及X轴标签统一问题求助

一、同步缩放实现 #

你已经用到了group配置，但需要确保两个图表的核心配置完全匹配，以下是关键调整点：

1. 统一图表组配置 #

两个图表的chart.group必须设置为相同的字符串，Apex Charts会自动关联同组图表的缩放行为：

// 图表1的chart配置
chart: {
  id: 'chart-1',
  group: 'sync-group', // 同组名称保持一致
  zoom: {
    enabled: true,
    type: 'x',
    autoScaleYaxis: false
  }
}

// 图表2的chart配置
chart: {
  id: 'chart-2',
  group: 'sync-group', // 必须和图表1的group名称一致
  zoom: {
    enabled: true,
    type: 'x',
    autoScaleYaxis: false
  }
}

2. 事件兜底方案（若自动分组同步失效） #

如果自动分组不生效，手动监听缩放事件强制同步：

// 初始化两个图表实例
const chart1 = new ApexCharts(document.querySelector('#chart1'), options1).render();
const chart2 = new ApexCharts(document.querySelector('#chart2'), options2).render();

// 监听图表1的缩放事件，同步到图表2
chart1.on('zoom', function({ xaxis }) {
  chart2.zoomX(xaxis.min, xaxis.max);
});

// 监听图表2的缩放事件，同步到图表1
chart2.on('zoom', function({ xaxis }) {
  chart1.zoomX(xaxis.min, xaxis.max);
});

二、X轴标签统一方案 #

要保证两个图表的X轴标签完全一致，需严格统一xaxis的所有相关配置：

1. 复用X轴配置 #

把X轴配置抽成独立变量，两个图表直接引用，避免手动编写导致的不一致：

// 统一的X轴配置，所有图表共享
const sharedXaxisConfig = {
  type: 'datetime',
  labels: {
    format: 'HH:mm',
    // 可额外统一样式配置，避免标签显示差异
    style: {
      fontSize: '12px',
      color: '#333'
    }
  },
  // 可选：强制统一时间范围，确保两个图表X轴刻度范围完全一致
  // min: 起始时间戳,
  // max: 结束时间戳
};

// 图表1的xaxis配置
xaxis: sharedXaxisConfig

// 图表2的xaxis配置
xaxis: sharedXaxisConfig

2. 校验数据源时间格式 #

检查两个图表的数据源dt，确保所有时间戳都是标准毫秒级时间戳，避免因时间格式不统一导致X轴刻度计算差异。

完整示例代码 #

// 统一X轴配置
const sharedXaxis = {
  type: 'datetime',
  labels: {
    format: 'HH:mm'
  }
};

// 图表1配置
const options1 = {
  series: [{ data: dt1 }],
  chart: {
    height: 500,
    type: 'rangeBar',
    animations: { enabled: false },
    id: 'gantt1',
    group: 'sync-group',
    zoom: {
      enabled: true,
      type: 'x',
      autoScaleYaxis: false
    }
  },
  plotOptions: { /* 保留你原有的plotOptions配置 */ },
  dataLabels: { /* 保留你原有的dataLabels配置 */ },
  xaxis: sharedXaxis,
  yaxis: { show: true }
};

// 图表2配置
const options2 = {
  series: [{ data: dt2 }],
  chart: {
    height: 500,
    type: 'rangeBar',
    animations: { enabled: false },
    id: 'gantt2',
    group: 'sync-group',
    zoom: {
      enabled: true,
      type: 'x',
      autoScaleYaxis: false
    }
  },
  plotOptions: { /* 保留你原有的plotOptions配置 */ },
  dataLabels: { /* 保留你原有的dataLabels配置 */ },
  xaxis: sharedXaxis,
  yaxis: { show: true }
};

// 渲染两个图表
const chart1 = new ApexCharts(document.querySelector('#chart1'), options1).render();
const chart2 = new ApexCharts(document.querySelector('#chart2'), options2).render();

// 可选：事件兜底同步（自动分组失效时启用）
chart1.on('zoom', ({ xaxis }) => chart2.zoomX(xaxis.min, xaxis.max));
chart2.on('zoom', ({ xaxis }) => chart1.zoomX(xaxis.min, xaxis.max));

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