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

Highcharts现已更新至最新版本7.2.1，添加了新的辅助功能选项，具有更大的灵活性，可自定义隐藏的屏幕阅读器区域，并修复了一些之前存在的BUG，赶快下载试用吧~

点击下载Highcharts最新试用版

交互式圆圈图是一种有吸引力且有用的图表类型，通常用于可视化图表中节点（或元素）之间的关系或依赖关系。其节点沿圆的外边缘布置，并在圆内部对其进行绘制。除了可视化连接之外，还可以轻松显示每个连接的大小。

下面的演示显示了2016年金砖四国的出口额（百万美元）。金砖四国由巴西，俄罗斯，印度，中国和南非组成。在这种情况下，这种联系说明了金砖国家之间的贸易。通过使用连接器宽度来表示贸易量，并使用颜色来表示国家或产地来对其进行“编码”，并对其进行了略微降低饱和度以提高可见度。

我们可以看到，中俄进出口贸易额接近平衡，而印度与中国的贸易平衡为负，即印度从中国的进口大于出口。同样清楚的是，中国在金砖国家之间的出口量最高。

要设置元素之间的关系，您要做的就是使用这种格式：其中和代表国家/地区，权重是进口数量。例如，中国在2016年从俄罗斯进口了322.29亿美元，这句话变成了代码：

      ['Brazil', 'Russia', 2524],
      ['Brazil', 'India', 4115],
      ['Brazil', 'China', 45738],
      ['Brazil', 'South Africa', 1401],
            
      ['Russia', 'Brazil', 2021],
      ['Russia', 'India', 5564],
      ['Russia', 'China', 32229],
      ['Russia', 'South Africa', 196],
      
      ['India', 'Brazil', 2484],
      ['India', 'Russia', 2398],
      ['India', 'China', 11757],
      ['India', 'South Africa', 3554],
      
      ['China', 'Brazil', 23364],
      ['China', 'India', 61311],
      ['China', 'South Africa', 12848],      
      ['China', 'Russia', 38105],
      
      ['South Africa', 'Russia', 255],
      ['South Africa', 'Brazil', 336],
      ['South Africa', 'India', 5814],
      ['South Africa', 'China', 22491],

完成该部分后，您所要做的就是将编写dependecywheel为图表类型：并且您的代码可以运行了。type: 'dependencywheel',

备注
为了使图表更具吸引力，我更改了默认颜色。为此，我仅在JS代码顶部添加了以下几行：

Highcharts.setOptions({
  colors: ['#058DC7', '#8dc705', '#c73f05', '#ffc080', '#24CBE5']});

辅助功能

当您处理依赖项转盘时，颜色是使图表更具吸引力且易于阅读的主要盟友。但是，由于估计有10％的人口是色盲的，因此有必要尝试使用图案填充或单色填充来排除任何人。

以下是使用图案填充和单色填充的演示：

对于没有色盲的人来说，此演示可能会使他们感到困惑，因为他或她不习惯于处理图案，尤其是采用压缩的方式，如下图。

在这种情况下，单色填充可能更适合所有用户阅读。

可访问性不只是考虑色盲。屏幕阅读器（例如NVDA，Jaws，Voiceover）也可以处理我们的图表，从而可以在图表中的节点之间导航，并通过屏幕阅读器软件大声读出其标签和值。为了使之成为可能，我们要做的就是添加对Highcharts可访问性模块的引用，并使其余代码保持不变：

<script src = “ https://code.highcharts.com/modules/accessibility.js” > </ script>

交互式圆圈图是一个引人注目的图表，它不仅具有吸引力和多维性，而且易于阅读。每当需要显示节点之间的关系时，请在项目中随意使用它。

=====================================================

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

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