Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當(dāng)前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點(diǎn)圖、角度測量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標(biāo)圖等幾十種圖表類型。

Highcharts現(xiàn)已更新至最新版本7.2.1，添加了新的輔助功能選項(xiàng)，具有更大的靈活性，可自定義隱藏的屏幕閱讀器區(qū)域，并修復(fù)了一些之前存在的BUG，趕快下載試用吧~

點(diǎn)擊下載Highcharts最新試用版

交互式圓圈圖是一種有吸引力且有用的圖表類型，通常用于可視化圖表中節(jié)點(diǎn)（或元素）之間的關(guān)系或依賴關(guān)系。其節(jié)點(diǎn)沿圓的外邊緣布置，并在圓內(nèi)部對其進(jìn)行繪制。除了可視化連接之外，還可以輕松顯示每個連接的大小。

下面的演示顯示了2016年金磚四國的出口額（百萬美元）。金磚四國由巴西，俄羅斯，印度，中國和南非組成。在這種情況下，這種聯(lián)系說明了金磚國家之間的貿(mào)易。通過使用連接器寬度來表示貿(mào)易量，并使用顏色來表示國家或產(chǎn)地來對其進(jìn)行“編碼”，并對其進(jìn)行了略微降低飽和度以提高可見度。

我們可以看到，中俄進(jìn)出口貿(mào)易額接近平衡，而印度與中國的貿(mào)易平衡為負(fù)，即印度從中國的進(jìn)口大于出口。同樣清楚的是，中國在金磚國家之間的出口量最高。

要設(shè)置元素之間的關(guān)系，您要做的就是使用這種格式：其中和代表國家/地區(qū)，權(quán)重是進(jìn)口數(shù)量。例如，中國在2016年從俄羅斯進(jìn)口了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為圖表類型：并且您的代碼可以運(yùn)行了。type: 'dependencywheel',

備注
為了使圖表更具吸引力，我更改了默認(rèn)顏色。為此，我僅在JS代碼頂部添加了以下幾行：

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

輔助功能

當(dāng)您處理依賴項(xiàng)轉(zhuǎn)盤時，顏色是使圖表更具吸引力且易于閱讀的主要盟友。但是，由于估計(jì)有10％的人口是色盲的，因此有必要嘗試使用圖案填充或單色填充來排除任何人。

以下是使用圖案填充和單色填充的演示：

對于沒有色盲的人來說，此演示可能會使他們感到困惑，因?yàn)?他或她不習(xí)慣于處理圖案，尤其是采用壓縮的方式，如下圖。

在這種情況下，單色填充可能更適合所有用戶閱讀。

可訪問性不只是考慮色盲。屏幕閱讀器（例如NVDA，Jaws，Voiceover）也可以處理我們的圖表，從而可以在圖表中的節(jié)點(diǎn)之間導(dǎo)航，并通過屏幕閱讀器軟件大聲讀出其標(biāo)簽和值。為了使之成為可能，我們要做的就是添加對Highcharts可訪問性模塊的引用，并使其余代碼保持不變：

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

交互式圓圈圖是一個引人注目的圖表，它不僅具有吸引力和多維性，而且易于閱讀。每當(dāng)需要顯示節(jié)點(diǎn)之間的關(guān)系時，請?jiān)陧?xiàng)目中隨意使用它。

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

想要購買Highcharts正版授權(quán)的朋友可以

更多精彩內(nèi)容，敬請關(guān)注下方的微信公眾號，及時獲取產(chǎn)品最新資訊▼▼▼