开源图表库Highcharts,如何创建桑基图?
Highcharts是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。
点击下载Highcharts最新试用版
在本教程中,我将以一种简单的方式解释什么是Sankey图以及如何使用Highcharts创建它。
Sankey图表可方便地说明不同级别的多个元素之间的数据流(演示:2017年美国能源消耗的估计流量)以及一个或多个元素的数据组成(演示:Apple Inc.的构成。总资产9/29 / 2020年)。Sankey图使节点和链接可视化。节点之间的链接宽度与流量大小成正比。
2017年美国能源消耗的估计流量
![](https://image.evget.com/attachment/keditor/image/20201222/20201222102329_51146.png)
Apple Inc.总资产的构成9/29/2020
如何用Highcharts创建Sakey图?
如前所述,使用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):
![](https://image.evget.com/attachment/keditor/image/20201222/20201222102609_13487.png)
现在,您准备创建自己的Sankey图,以可视化各个部门(例如能源,供应链管理,金融等)中的数据流或组成。
APS帮助提升企业生产效率,真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划,提高准时交货能力,提高产能和资源利用率
想要购买Highcharts正版授权,或了解更多产品信息请点击【慧都网咨询在线客服】