Highcharts：实现按月份分组展示事件的时间线图表

可以通过对Highcharts时间线图表做自定义配置，实现按月份分组展示事件的效果，核心思路是对数据按月份分组处理，再通过x轴分组标签、数据点定位来达成分组展示的需求。

以下是可运行的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts 按月分组时间线</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/timeline.js"></script>
</head>
<body>
    <div id="container" style="height: 400px; width: 100%;"></div>

    <script>
        // 模拟按月份分组的事件数据
        const rawData = [
            { date: '2024-01-05', title: '事件A', description: '1月的第一个事件' },
            { date: '2024-01-18', title: '事件B', description: '1月的第二个事件' },
            { date: '2024-02-10', title: '事件C', description: '2月的第一个事件' },
            { date: '2024-02-22', title: '事件D', description: '2月的第二个事件' },
            { date: '2024-03-08', title: '事件E', description: '3月的事件' }
        ];

        // 处理数据，按月份分组并生成Highcharts所需格式
        const groupedData = rawData.reduce((acc, item) => {
            const month = new Date(item.date).toLocaleString('zh-CN', { year: 'numeric', month: 'long' });
            if (!acc[month]) {
                acc[month] = [];
            }
            acc[month].push({
                x: new Date(item.date).getTime(),
                name: item.title,
                label: item.title,
                description: item.description
            });
            return acc;
        }, {});

        // 转换为Highcharts系列数据格式，添加分组标识
        const seriesData = [];
        Object.keys(groupedData).forEach(month => {
            groupedData[month].forEach((point, index) => {
                // 为每个月份的第一个数据点添加分组标签
                if (index === 0) {
                    point.xAxisLabel = month;
                }
                seriesData.push(point);
            });
        });

        Highcharts.chart('container', {
            chart: {
                type: 'timeline'
            },
            title: {
                text: '按月分组的事件时间线'
            },
            xAxis: {
                type: 'datetime',
                // 自定义x轴标签，只显示分组的月份
                labels: {
                    formatter: function() {
                        const point = seriesData.find(p => p.x === this.value && p.xAxisLabel);
                        return point ? point.xAxisLabel : '';
                    },
                    style: {
                        fontWeight: 'bold',
                        fontSize: '12px'
                    }
                },
                tickPositions: seriesData.filter(p => p.xAxisLabel).map(p => p.x)
            },
            yAxis: {
                gridLineWidth: 1,
                title: {
                    text: ''
                },
                labels: {
                    enabled: false
                }
            },
            series: [{
                data: seriesData,
                // 调整数据点的垂直位置，实现同月份事件堆叠
                pointPlacement: function() {
                    const month = new Date(this.x).toLocaleString('zh-CN', { year: 'numeric', month: 'long' });
                    const monthPoints = groupedData[month];
                    const index = monthPoints.findIndex(p => p.x === this.x);
                    return (index - (monthPoints.length - 1) / 2) * 0.2;
                },
                marker: {
                    radius: 4
                }
            }]
        });
    </script>
</body>
</html>

关键配置说明 #

• 数据分组处理：通过reduce方法将原始数据按月份分组，为后续分组展示做准备。
• x轴自定义标签：仅显示每个月份分组第一个数据点对应的月份标签，实现分组标题效果。
• 点位置调整：通过pointPlacement函数调整同月份事件的垂直位置，避免重叠，实现同组内事件的有序展示。

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