彩票走势图

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

翻译|使用教程|编辑:吴园园|2019-08-07 14:25:19.703|阅读 700 次

概述:Highcharts是纯JavaScript编写的开源图表库,为你的Web应用程序提供直观的、交互式图表。本文将介绍如何使用Highcharts创建交互式网络图,希望对您有所帮助。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

HighChart教程:创建交互式网络图

点击下载Highcharts最新试用版

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

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

HighChart教程:创建交互式网络图

要复制此图表,您所要做的就是创建一个遵循此结构的关系表['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语言树,其中链接表示语言之间的关系。

HighChart教程:创建交互式网络图

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

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

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

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

VAR celticColor = “#7becb2” ,
  italicColor = “#ecb27b” ,
  indoIranianColor = “#ec7bb6” ;

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

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

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

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

HighChart教程:创建交互式网络图

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

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

HighChart教程:创建交互式网络图

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


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

想要购买Highcharts正版授权的朋友可以

更多精彩内容,欢迎关注下方的微信公众号,及时获取产品最新资讯▼▼▼

图片2.jpg


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP