半岛权威十大直营(官方)网站

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
        },
...