Highcharts时间敏感数据并列柱状图对比实现问题

核心问题原因 #

你的两组数据时间戳差了完整的一天（当日是16655xxxxxx，昨日是16656xxxxxx），Highcharts会根据实际时间戳在x轴上分别定位柱子，自然无法并列。linkedTo属性仅用于关联系列的显示/隐藏状态，和x轴位置对齐无关，所以不起作用。

解决方案步骤 #

1. 对齐两组数据的时间基准 #

将昨日数据的每个时间戳减去一天的毫秒数（86400000），让昨日的每个时段和当日的对应时段在x轴上处于同一位置。

// 转换昨日数据时间戳，对齐到当日的同一时段
const alignPreviousDataTime = (rawData) => {
  const ONE_DAY = 24 * 60 * 60 * 1000;
  return rawData.map(item => ({
    tbldate: parseInt(item.tbldate) - ONE_DAY,
    tbldata: item.tbldata
  }));
};

// 处理昨日数据
const processedPrevious = alignPreviousDataTime(tempPrevious[0].data);

2. 调整Series配置实现并列 #

将数据转换为Highcharts友好的[时间戳, 值]数组格式，通过columnOffset设置柱子偏移，实现并列效果（无需linkedTo）：

this.chartOptions.series = [
  {
    type: "column",
    name: "Current",
    color: "#72A2C0",
    data: tempCurrent[0].data.map(item => [parseInt(item.tbldate), item.tbldata]),
    columnOffset: -15, // 向左偏移，和右侧柱子拉开间距
  },
  {
    type: "column",
    name: "Previous",
    color: "#192E5B",
    data: processedPrevious.map(item => [parseInt(item.tbldate), item.tbldata]),
    columnOffset: 15, // 向右偏移
  },
];

3. 优化X轴标签显示（可选） #

将X轴标签改为显示时段（小时:分钟），更直观体现同时段对比：

xAxis: {
  type: "datetime",
  // ...保留原有配置
  labels: {
    y: 15,
    format: '{value:%H:%M}' // 仅显示小时和分钟
  },
},

补充说明 #

• 如果需要更精确的分组控制，可以在plotOptions.column中设置grouping: true（默认开启），Highcharts会自动将同一x轴值的柱子分组并列。
• 确保时间戳转换时用parseInt处理，避免字符串类型导致的识别问题。

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