使用Highcharts创建流图（Stream Graph）指南｜流动数据的可视化图表与数据艺术表达

数据世界有一种很有趣的现象：当数据维度越来越多时，传统图表就开始"挤不下"。

堆叠柱状图会变得拥挤，折线图会变成一团"意大利面"。

这时候就轮到一种非常优雅的图表登场------Stream Graph（流图）。

流图是一种堆积面积图，图形围绕一个中心轴偏移，形成流动且具有有机感的形状。

有关Highcharts流图更详细的示例和文档，请查看 API.

Stream graph 流图、河流图

像河流一样展示数据随时间的变化，每一条"水流"代表一个数据类别，整体视觉效果极具层次感和动感，非常适合展示时间维度的结构变化。

在 Highcharts 中，Stream Graph 本质上是基于 stacked area chart（堆叠面积图）的一种特殊布局，通过"流式堆叠算法"让数据围绕中心轴上下流动，从而形成流线形结构。

一句话理解：流图 = 堆叠面积图 + 中心对称布局 + 平滑曲线。

具有三个明显特点：

数据以"流动层"形式展示------面积代表数量：每个数据系列的宽度代表其数值大小，颜色编码：不同类别用不同颜色区分
各数据层围绕中心轴对称分布------居中基线：数据不是从零开始，而是围绕中心轴线流动
视觉效果更平滑、更具艺术感------有机形状：曲线平滑过渡，形成类似河流的形态

典型应用场景包括：

音乐播放量趋势分析：流图由Lee Byron于2008年为《纽约时报》的音乐趋势可视化项目而推广，因其优雅的流动形态而得名。
社交媒体话题热度变化
网站流量来源变化
能源结构变化趋势
- 市场份额随时间变化

如果你看过 Spotify 或 Netflix 的数据可视化报告，很可能见过这种图。

Highcharts 中实现 Stream Graph

Highcharts 没有单独的 streamgraph 类型，但可以通过堆叠面积图 + stream stacking 实现。核心配置有三个：

type: 'areaspline'

stacking: 'stream'

lineWidth: 0

示例代码如下：

javascript 复制代码

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },

    title: {
        text: '音乐流行趋势 Stream Graph'
    },

    xAxis: {
        categories: [
            '2018','2019','2020','2021','2022','2023'
        ]
    },

    yAxis: {
        visible: false
    },

    tooltip: {
        shared: true
    },

    plotOptions: {
        series: {
            stacking: 'stream',
            lineWidth: 0,
            marker: {
                enabled: false
            }
        }
    },

    series: [{
        name: 'Pop',
        data: [10, 15, 20, 18, 22, 25]
    },{
        name: 'Rock',
        data: [8, 10, 14, 13, 11, 9]
    },{
        name: 'Hip-Hop',
        data: [6, 8, 12, 17, 19, 21]
    },{
        name: 'Electronic',
        data: [4, 6, 9, 11, 14, 16]
    }]
});

数据结构

流图的数据仅仅是设置Y值，有时也包括X值。流图中的每个区域代表一个系列，系列 series之间是堆叠在一起的。

js 复制代码

series: [{
    "name": "Finland",
    "data": [
        0, 11, 4, 3, 6, 0, 0, 6
    ]
}, {
    "name": "Austria",
    "data": [
        0, 3, 4, 2, 4, 0, 0, 8, 8
    ]
}, {
    "name": "Sweden",
    "data": [
        0, 2, 5, 3, 7, 0, 0, 10, 4
    ]
}]

标记

多亏了系列标签模块，Highcharts 允许在流图元素的顶部以最佳位置添加标签，从而最大化数据的可读性和快速理解。

总结

Stream Graph 是一种非常具有艺术感的数据可视化方式。它通过流线型堆叠结构，将复杂的多维时间数据转化为直观的趋势变化图。

Highcharts通过streamgraph.js模块提供了完整的流图支持，让开发者能够轻松创建专业级的流图可视化。

当你需要展示：多类别趋势，时间变化结构，数据故事，流图往往比传统图表更具表现力。

注意事项/最佳实践：

系列数量控制在5-8个，过多则合并小类别
使用柔和、有区分度的配色方案
提供详细的工具提示，补偿精确读取的困难
对系列进行合理排序，让图形更美观
在小屏幕上简化图例和工具提示