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 = “ //code.highcharts.com/modules/accessibility.js” > </ script>

交互式圓圈圖是一個引人注目的圖表，它不僅具有吸引力和多維性，而且易于閱讀。每當需要顯示節點之間的關系時，請在項目中隨意使用它。

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

想要購買Highcharts正版授權的朋友可以

更多精彩內容，敬請關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼