Highcharts自定义时间轴Series可视化失败，报错c.points未定义

问题根源 #

1. 初始错误：数据结构不合理，将每个数据点作为独立的series传入，导致图例把每个点都当成可筛选项。
2. 错误修复尝试：添加legendType: ''会破坏时间轴（timeline）的内部渲染逻辑——时间轴依赖series.points数组生成图表，该配置会让Highcharts无法识别series的图例类型，进而抛出c.points is undefined错误。

正确解决方案 #

1. 重构数据结构 #

将原始数据按1-10的Series分组，把同属一个Series的所有数据点归到同一个series对象中，每个series对应图例中的一个选项。

示例数据处理代码：

// 假设原始数据格式如下
const rawData = [
  { seriesId: 1, x: Date.UTC(2024, 0, 1), y: 12, name: '事件A' },
  { seriesId: 1, x: Date.UTC(2024, 0, 5), y: 18, name: '事件B' },
  { seriesId: 2, x: Date.UTC(2024, 0, 3), y: 25, name: '事件C' },
  // ... 更多数据
];

// 按seriesId分组生成符合要求的series数组
const formattedSeries = Object.values(rawData.reduce((group, item) => {
  const seriesName = `Series ${item.seriesId}`;
  if (!group[seriesName]) {
    group[seriesName] = {
      name: seriesName,
      type: 'timeline',
      data: []
    };
  }
  group[seriesName].data.push({
    x: item.x,
    y: item.y,
    name: item.name
  });
  return group;
}, {}));

2. 配置Highcharts图表 #

使用重构后的formattedSeries作为图表的series数据源，无需额外设置legendType，Highcharts会自动为每个series生成图例项：

Highcharts.chart('chart-container', {
  chart: {
    type: 'timeline'
  },
  legend: {
    enabled: true, // 启用图例
    layout: 'horizontal',
    align: 'center'
  },
  xAxis: {
    type: 'datetime'
  },
  series: formattedSeries
});

效果说明 #

• 图例将显示Series 1到Series 10共10个选项，点击任意图例项可显示/隐藏对应Series的所有数据点。
• 时间轴可正常渲染，不会出现points is undefined的报错。

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