使用腳本構(gòu)建圓包裝圖（二）

　　3. 加載數(shù)據(jù)

　　現(xiàn)在是時(shí)候添加數(shù)據(jù)了。

　　我想可視化福布斯最富有人群排名“福布斯億萬富翁2022”的數(shù)據(jù)，其中包括有關(guān)其凈資產(chǎn)，國家，財(cái)富來源和行業(yè)的信息。我已經(jīng)從上面的鏈接中獲取了100個(gè)最富有的數(shù)據(jù)，并將其保存在JSON文件中。(隨意使用其他支持的數(shù)據(jù)格式，只需確保設(shè)置數(shù)據(jù)的方式符合圓圈包裝圖表的數(shù)據(jù)說明。

　　要正確加載數(shù)據(jù)，請(qǐng)準(zhǔn)備好使用該函數(shù)。喜歡這個(gè)：

　　現(xiàn)在，只剩下幾行 JavaScript 代碼來完成圓圈包裝圖！

　　4. 編寫一些腳本圖表代碼

　　最后，我們需要一些 JavaScript 代碼來創(chuàng)建圓圈包裝圖。

　　添加該函數(shù)，該函數(shù)將包含整個(gè)圖表的 JS 代碼。它確保代碼在頁面完全加載之前不會(huì)運(yùn)行。anychart.onDocumentReady()

　　加載 JSON 數(shù)據(jù)文件，如步驟 3 所示，然后添加數(shù)據(jù)。

　　使用該函數(shù)創(chuàng)建一個(gè)圓形包裝圖實(shí)例，并將數(shù)據(jù)集傳遞到其中。circlePacking()

　　最后，為圖表指定一個(gè)標(biāo)題，將其放在以前指定的容器中，然后使用命令顯示它。draw()

　　基于 JavaScript 的圓包裝圖已準(zhǔn)備就緒！

　　您可以在任何圖表游樂場圖表上找到這個(gè)簡單JavaScript圓圈包裝圖表的交互式版本以及源代碼。隨意嘗試它。

　　為了您的方便，我還將完整的圓形包裝圖代碼放在下面。

　　我們可以立即從圓圈包裝圖中推斷出，大多數(shù)頂級(jí)億萬富翁來自美國，其次是中國。與此類似，我們也可以獲得有關(guān)行業(yè)以及凈資產(chǎn)金額的見解。

　　但是，這只是 JS 圓包裝圖的基本版本。圖形可以進(jìn)一步定制，看起來更好(仍然沒有太多的麻煩)

　　帶有腳本的高級(jí)圓包裝圖

　　到目前為止，使用JS創(chuàng)建的圓形包裝圖已經(jīng)看起來令人賞心悅目。但偶爾，體面是不夠的。此外，在某些情況下，您可能需要調(diào)整圖表的外觀和功能。

　　幸運(yùn)的是，您可以輕松自定義圓形包裝圖表以滿足您的需求和品味。現(xiàn)在，我將演示您可能還想進(jìn)行的一些快速自定義以改進(jìn)可視化效果：

　　A. 自定義工具提示。

　　B.自定義外觀。

　　C. 自定義標(biāo)題。

　　D. 自定義標(biāo)簽。

　　A.自定義工具提示

　　當(dāng)我們將鼠標(biāo)懸停在圓圈上時(shí)，將顯示凈值。讓我們自定義工具提示，使其包含更多信息。

　　現(xiàn)在我們可以清楚地看到億萬富翁圈子的名字，凈資產(chǎn)和財(cái)富來源，以及行業(yè)和國家集團(tuán)的總凈資產(chǎn)價(jià)值。

　　B.自定義外觀

　　默認(rèn)情況下，圖表的背景色為白色。讓我們將其更改為灰色。使用該功能可以輕松完成。background()

　　讓我們也使用該函數(shù)略微增加圓圈邊框的粗細(xì)。stroke()

　　這個(gè)JS圈包裝的互動(dòng)版本可以在任何圖表游樂場上找到。根據(jù)需要更改顏色。

　　C. 自定義標(biāo)題

　　圖表標(biāo)題可以輕松增強(qiáng)。跟隨我，因?yàn)槲抑恍鑶⒂肏TML并更改字體顏色，大小和粗細(xì)：

　　這是此標(biāo)題增強(qiáng)后包裝圖的外觀：

　　D. 自定義標(biāo)簽

　　目前，國家/地區(qū)的名稱以默認(rèn)格式顯示。讓我們自定義它們，使它們以更優(yōu)雅的方式出現(xiàn)在框中：

　　圓形包裝圖現(xiàn)在看起來非常優(yōu)雅和漂亮。為什么不呢?畢竟，它被用來想象擁有數(shù)十億價(jià)值的人！

　　這個(gè)最終的JavaScript圓圈包裝圖表的完整源代碼可以在下面找到，也可以在任何圖表游樂場上找到。

　　結(jié)論

　　匪夷所思！我們的 JavaScript 圓圈包裝圖已經(jīng)構(gòu)建完成。這是一個(gè)簡單的過程，現(xiàn)在，繼續(xù)創(chuàng)建您自己的 JavaScript 圓圈包裝圖表可視化!圓形包裝圖文檔和圓形包裝圖示例分別為您提供進(jìn)一步的說明和靈感。

　　此外，還有大量其他圖表類型可用，不要害怕看它們。你會(huì)驚訝于你也可以輕松地在JS中構(gòu)建它們！

　　最后，請(qǐng)不要猶豫，詢問查詢或提出建議。我期待著看到你將創(chuàng)建的JavaScript圓圈包裝圖表！