求助：使用HighChart JS绘制带小时维度的周潮汐图

你当前的代码逻辑和潮汐图的核心需求不匹配，导致结果不符合预期，核心问题如下：

错误点 #

你把每个小时作为独立数据系列，X轴用星期分类，这会让Highcharts为每天的同一小时绘制一个数据点，最终呈现24条离散的线（对应24小时）。但潮汐图需要的是按连续时间顺序（从周一0点到周日23点）的单条（或多站点的多条）连续曲线。

修正步骤 #

1. 重构数据结构：将每个时间点（日期+小时）和对应的潮位组合成数据对，格式可以是[时间戳, 潮位值]或者Highcharts可解析的日期字符串（比如'2024-05-20 00:00'）。
2. 设置时间类型X轴：将X轴的type设为'datetime'，让Highcharts自动处理时间刻度的生成与格式化。
3. 合并为单个系列：单站点潮汐数据只需一个系列，把所有连续的时间-潮位点放入该系列的data中。

修正后的代码示例 #

// 构造模拟的连续时间潮汐数据：从周一0点到周日23点，每小时一个数据点
const startDate = new Date('2024-05-20'); // 周一
const tideData = [];
// 生成7天×24小时的模拟数据
for (let day = 0; day < 7; day++) {
  for (let hour = 0; hour < 24; hour++) {
    const currentTime = new Date(startDate);
    currentTime.setDate(startDate.getDate() + day);
    currentTime.setHours(hour);
    // 模拟潮位值（替换为你的真实数据即可）
    const level = 3 + Math.sin((day * 24 + hour) / 12) * 1.5;
    tideData.push([currentTime.getTime(), Number(level.toFixed(1))]);
  }
}

Highcharts.chart('container', {
  chart: {
    type: 'spline' // spline比line更贴合潮汐平滑变化的特性
  },
  title: {
    text: 'Weekly Tide Chart'
  },
  xAxis: {
    type: 'datetime',
    title: {
      text: 'Time'
    },
    // 自定义刻度显示格式：星期缩写+小时
    labels: {
      format: '{Weekday %a} %H:00'
    }
  },
  yAxis: {
    title: {
      text: 'Tide Level'
    }
  },
  tooltip: {
    // 自定义tooltip内容，显示具体时间和潮位
    formatter: function() {
      return `<b>Tide Level</b><br/>${Highcharts.dateFormat('%A %H:00', this.x)}: ${this.y}m`;
    }
  },
  series: [{
    name: 'Tide',
    data: tideData,
    lineWidth: 2,
    marker: {
      enabled: false // 关闭点标记，让曲线更平滑
    }
  }]
});

补充说明 #

• 如果你的真实数据是按“每天24小时潮位”存储的，只需通过循环将其转换为连续的时间戳-潮位对即可，无需手动拆分。
• 可以通过调整xAxis.labels.format和tooltip.formatter自定义时间显示格式，让图表更贴合你的阅读习惯。
• 若需要展示多站点潮汐数据，只需新增对应的数据系列即可，每个系列对应一个站点的连续数据。

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