开源图表库HighCharts教程：创建交互式 络图

Highcharts最新试用版

络图是使用简单的链接显示元素（节点）之间的关系的图表。 络图允许我们快速可视化节点之间的集群和关系; 该图表通常用于生命科学， 络安全，情 等行业。

创建 络图很简单。该演示显示了五个节点以及它们之间的关系。节点1与节点3,4和2具有关系。节点5还与节点2和4具有关系，但与节点3没有关系。

要复制此图表，您所要做的就是创建一个遵循此结构的关系表[‘from’, ‘to’]。在此示例中，表格如下所示：

data: [  ['Node 1', 'Node 2'],  ['Node 1', 'Node 3'],  ['Node 1', 'Node 4'],  ['Node 4', 'Node 5'],  ['Node 2', 'Node 5']]

这是另一个更复杂的演示。节点代表语言Indo-Europen语言树，其中链接表示语言之间的关系。

注意使用颜色来帮助读者快速查看聚类。橙色代表斜体语言，而绿色和粉红色代表凯尔特语和印度伊朗语言。

要向节点添加颜色，请使用nodes基本上是一个数组的选项来使用其ID访问任何节点：

nodes: [{      id: 'Indo-Iranian',      color: indoIranianColor    },    ...

color属性具有节点的颜色; 在这种情况下，变量indoIranianColor。节点的颜色被定义为变量，以便在第一行中获得更大的灵活性和维护：

VAR celticColor = “＃7becb2” ，  italicColor = “＃ecb27b” ，  indoIranianColor = “＃ec7bb6” ;

另一种可视化连接和节点性质的方法是将大小变量添加到 络图中; 节点的大小有助于对节点的类别进行分类。下面的演示说明了韩国国内航线。节点代表分为三大类的机场：

• 拥有50多个直达目的地的机场。

• 有超过10个直达目的地的机场。

• 机场少于10个直达目的地。

颜色和大小有助于读者快速识别相对于彼此的机场大小。大小也可以用作辅助功能辅助工具，因为它允许色盲的人获取数据故事，即使他们无法区分颜色。

您还可以使用单色图表使图表更易于访问。但是，就个人而言，我更喜欢不同尺寸和颜色的产品，因为它让所有读者的生活更轻松。

尽管 络图表易于创建并且可以分享令人愉快的图表，但如果它们显示大量节点，它们可能非常复杂且难以理解。没有确切数量的节点可以避免，但尝试使用不同的颜色，大小，可以使您的图表更易于阅读。

本篇教程对您是否有用，欢迎分享您的疑问和看法~

想要购买Highcharts正版授权的朋友可以咨询官方客服。

标签：