开源图表库Highcharts教程：如何创建桑基图?

在本教程中，我将以一种简单的方式解释什么是Sankey图以及如何使用Highcharts创建它。

Highcharts是一款纯JavaScript编写的图表库，为你的Web 站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts最新试用版

在本教程中，我将以一种简单的方式解释什么是Sankey图以及如何使用Highcharts创建它。

Sankey图表可方便地说明不同级别的多个元素之间的数据流（演示：2017年美国能源消耗的估计流量）以及一个或多个元素的数据组成（演示：Apple Inc.的构成。总资产9/29 / 2020年）。Sankey图使节点和链接可视化。节点之间的链接宽度与流量大小成正比。

2017年美国能源消耗的估计流量

如前所述，使用Highcharts创建Sankey图很简单；您首先要使用下的三个参数写下节点结构data。例如，如果节点A向节点B提供数量为10个单位的数据流，则我们的数据结构将为[“node A”, “node B”, 10]，那就是那样，简单明了。

默认情况下，Highcharts引擎负责节点的布局定位。该引擎从左到右，然后按照它们在数据结构中的出现从上到下，将具有类似节点提供者的节点收集并放置在同一列中。

此外，Highcharts提供了两个方便的选项来重新排列布局以定制您的需求。

要在任何列上设置节点，请使用选项column，并在y轴上使用offset选项来调整节点。

nodes: [        {          id: "Electricity & Heat",          color: "#ffa500",          offset: -110        },        {          id: "Residential",          color: "#74ffe7",          column: 2,          offset: 50        },...

可以访问Sankey图以适合视觉障碍的用户。通过使用常识选择正确的颜色和选项来突出显示节点和链接（示例：Apple Inc.（AAPL）资产负债表9/29/2020）：

APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买Highcharts正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：