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最新試用版

數(shù)據(jù)總計(jì)達(dá)到100％時要使用什么圖表

圖表最常見的用途之一是說明零件與整個零件之間的關(guān)系。“數(shù)據(jù)構(gòu)成”。餅圖可能是為此目的最受歡迎的圖表類型，但其他圖表類型可能同樣好（專家會爭論得更好）。

在本文中，我們將研究使用餅圖，甜甜圈，朝陽圖，堆積的條形/柱形，堆積的面積和樹圖圖表有效地溝通零件與整個關(guān)系的方法。

使用哪個圖表主要由數(shù)據(jù)的性質(zhì)決定。根據(jù)經(jīng)驗(yàn)，對于簡單數(shù)據(jù)集（六個或更少的元素），餅圖或甜甜圈圖效果很好。對于更密集的數(shù)據(jù)集，最好使用其他圖表來說明組成，例如堆疊的條形圖，柱形圖或面積圖。對于嵌套的（分層）數(shù)據(jù)集，旭日形和樹形圖可能是適合的工作。

讓我們探索這些圖表類型，看看我們可能希望在其他圖表類型中選擇圖表類型。

簡單數(shù)據(jù)集

餅形圖

由于其簡單的設(shè)計(jì)，餅圖是使構(gòu)圖可視化的最流行方法。成分或元素表示為整體的小數(shù)部分。下圖顯示了我們呼吸的空氣中的氣體成分。

藍(lán)色的氮?dú)馐强諝庵凶钪饕某煞郑?8％，綠色的氧氣占空氣成分的20.9％。
與所有成分圖一樣，餅圖可以輕松設(shè)計(jì)以滿足殘疾人的需求（請參見下面的演示）：

備注
餅圖包含六個以上的元素，因此很難區(qū)分相似的“切片”。但是，即使切片數(shù)量很少，也可以通過訂購切片的方式來提高可讀性。看一下這兩個示例（演示1和演示2），它們都包含有關(guān)人們何時購買甜甜圈的完全相同的數(shù)據(jù)。一個按一天中的時間排序，另一個按切片的大小排序。在甜甜圈銷售的每日最熱門時段排名中，哪一項(xiàng)更好的工作？

如果您有六個以上的切片，請查看是否可以將它們分為多個圖表，或者使用其他圖表類型，例如旭日形，柱形或樹形圖。

甜甜圈圖

說到甜甜圈，甜甜圈圖與餅圖相同，但是通過僅沿餅圖的外邊緣顯示一個區(qū)域，可以更輕松地將元素相互比較。

下面的演示使用甜甜圈圖顯示了空氣成分：

嵌套數(shù)據(jù)集

朝陽

朝陽圖看起來像一個嵌套在一個或多個甜甜圈圖上的餅圖。這是顯示包含父子關(guān)系的數(shù)據(jù)集組成的一種全面而緊湊的方法。

下圖顯示了100克各種食物中的蛋白質(zhì)含量：

上面的圖表按四個主要類別（內(nèi)部餅圖）構(gòu)建，它們具有不同的顏色：肉，魚，谷物和種子等。外部的“甜甜圈圖”將每個主要類別細(xì)分為更小的元素，從最高到最低蛋白質(zhì)含量排序。

該圖表可能會非常繁忙，因此應(yīng)謹(jǐn)慎使用。在類似樹形圖之類的類似圖表上選擇此圖表的主要原因是，您希望所有子元素都立即可見。

但是要注意的一件事是，森伯斯特圖也允許進(jìn)行向下鉆取。如果您的聽眾能夠與圖表進(jìn)行交互，則可以通過單擊父項(xiàng)來公開子級數(shù)據(jù)（請參見下面的演示）：

樹狀圖

與Sunburst一樣，樹形圖將嵌套數(shù)據(jù)集的組成可視化。對于某些數(shù)據(jù)集，可以使用任何一種圖表類型，只要子級切片的數(shù)量不太密集以至于無法讀取。對于數(shù)據(jù)密集的圖表，樹形圖是理想的選擇。

下面的樹圖演示顯示了與先前的森伯斯特圖表相同的數(shù)據(jù)；它還具有向下鉆取選項(xiàng)，使讀者可以進(jìn)一步探索數(shù)據(jù)。

備注
森伯斯特圖和樹圖圖都顯示嵌套的數(shù)據(jù)集。但是，每種圖表類型都有其自身的優(yōu)點(diǎn)和局限性。森伯斯特圖使讀者可以快速查看所有詳細(xì)信息，這是理想的靜態(tài)圖表類型，但這是以空間為代價(jià)的，因?yàn)?森伯斯特需要大面積才能顯示大量數(shù)據(jù)。另一方面，樹形圖非常適合緊湊且有限的空間，由于其向下鉆取功能，讀者可以選擇瀏覽數(shù)據(jù)以獲取更多見解。盡管Treemap易于閱讀，即使處于初始的“靜態(tài)”狀態(tài)，它的強(qiáng)大功能實(shí)際上也是無與倫比的緊湊型交互式圖表。

時間序列

堆積柱形圖

堆積柱形圖非常適合顯示時間序列數(shù)據(jù)的組成，這些時間序列數(shù)據(jù)也分為幾類。時間方面是餅圖和朝陽圖無法顯示的。
下圖顯示了1960年至2016年美國外國出生人口的百分比組成。堆積的表格是完美的圖表，這些數(shù)據(jù)可以直觀地顯示出來，因?yàn)閿?shù)據(jù)的組成和時間的推移都顯示在同一圖表上。

根據(jù)圖表，從60年代到90年代，歐洲和加拿大人是美國的主要移民群體。從2000年代開始，有75％的移民來自亞洲，拉丁美洲和墨西哥，歐洲和加拿大的移民約占14％。

堆積條形圖

堆積的條形圖與堆積的柱形圖相似，除了數(shù)據(jù)是水平顯示而不是垂直顯示。
下面的條形堆積圖顯示的數(shù)據(jù)與上面使用的列堆積圖相同：

備注
如果您的數(shù)據(jù)在X軸上有很長的列表，則堆疊的條形圖是正確的選擇，因?yàn)槎询B的條形圖是垂直進(jìn)行的。這對于移動設(shè)備可能是有利的，因?yàn)槟梢陨舷聺L動以查看完整的時間軸。

堆積面積

堆積面積圖類似于柱狀圖和條形堆積圖。它們都用于顯示數(shù)據(jù)合成隨時間的進(jìn)度。堆疊面積圖提供了有吸引力的趨勢顯示，這要?dú)w功于使用面積而不是列或條的平滑流動表示（請查看下面的演示）：