Highcharts时间线图（Timeline Chart）完全指南：事件序列的可视化叙事图表

在数据可视化世界里，有一种图表专门用来回答一个问题："事情是按什么顺序发生的？"

很多数据不是简单的数值对比，而是一连串事件。产品发布、项目里程碑、公司发展史、历史事件------这些数据天然带有时间维度。

------这正是 Timeline Chart（时间线图）的舞台。

在 Highcharts 中，Timeline 是一个专门用于展示**事件序列（Event Sequence）**的图表类型，它将关键节点沿时间轴排列，并通过视觉连接形成一条清晰的"事件轨迹"。

一句话理解：Timeline = 时间轴 + 关键事件节点。

它不是统计图，而是一种数据叙事工具（Data Storytelling）。

Highcharts Timeline chart 时间线图

时间线图表可视化了重要事件在一段时间内的变化。带有时间线系列的图表会将每个数据点显示为沿水平或垂直线的单独事件。时间线系列也被称为时间线示意图。

对于时间线系列中定义的每个点，都会放置一个带有描述性文本的标记。建议将较长的事件描述放在工具提示中。这样，在悬停在数据点上时，描述信息就会显示出来。默认情况下，工具提示会显示数据系列点的description属性所指定的文本。

开始使用Highcharts Timeline chart 时间线图

时间线系列需要同时加载 Highcharts 和 timeline.js 模块。

以下是将时间线加载到网页的示例：

html 复制代码

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>

数据格式

时间线图中的事件可以通过两种方式进行可视化：

将时间线划分为与系列数据中指定的数据点数量相等的时间段。
将事件放置在与日期时间轴相关联的位置。这样就可以显示所有点之间的确切时间间隔。

上述两种可视化时间线的方式，其时间线系列数据的结构是不同的。

Highcharts时间线图的系列数据，包含时间段

该系列数据没有设置x属性：

js 复制代码

 data: [{
    name: 'Some date',
    label: 'Event label',
    description: 'Description of this event.'
}, {
    name: 'Another date',
    label: 'Another event label',
    description: 'Description of second event'
}]

与日期时间轴相关联的事件

要在日期时间轴上放置事件，可以将 x 属性设置为自 1970 年以来的时间戳（以毫秒为单位）。

系列数据示例：

js 复制代码

data: [{
    x: 1514764800000,
    name: 'Event name',
    label: 'Event label',
    description: 'Description of this event.'
}, {
    x: 1526774400000,
    name: 'Event name',
    label: 'Another event label',
    description: 'Description of second event'
}]

下方的演示展示了太空探索的时间线。演示中显示了均匀的时间间隔

下方的演示还展示了太空探索的关键时刻，但它扩展了更多事件，并在datetime轴上显示了实时日期。

竖直方向的时间线

若要显示垂直时间线，将chart.inverted设置为true。

交替显示标签

在dataLabels配置中使用alternate属性，以交替放置数据标签（在点的两侧）。

其他配置选项

自定义时间线图表，提供大多数Highcharts图表的标准选项，如数据标签的宽度、距离或使用点属性、颜色、x、标记或连接器。在下面的演示中，数据点属性中的颜色属性用于设置时间线中某一部分的颜色。

下方的演示展示了时间线系列图中不同元素的样式。