3. 加載數(shù)據(jù)
現(xiàn)在是時候添加數(shù)據(jù)了。
我想可視化福布斯最富有人群排名“福布斯億萬富翁2022”的數(shù)據(jù)，其中包括有關(guān)其凈資產(chǎn)，國家，財富來源和行業(yè)的信息。我已經(jīng)從上面的鏈接中獲取了100個最富有的數(shù)據(jù)，并將其保存在JSON文件中。(隨意使用其他支持的數(shù)據(jù)格式，只需確保設(shè)置數(shù)據(jù)的方式符合圓圈包裝圖表的數(shù)據(jù)說明。
要正確加載數(shù)據(jù)，請準備好使用該函數(shù)。喜歡這個：
現(xiàn)在，只剩下幾行 JavaScript 代碼來完成圓圈包裝圖！
4. 編寫一些腳本圖表代碼
最后，我們需要一些 JavaScript 代碼來創(chuàng)建圓圈包裝圖。
添加該函數(shù)，該函數(shù)將包含整個圖表的 JS 代碼。它確保代碼在頁面完全加載之前不會運行。anychart.onDocumentReady()
加載 JSON 數(shù)據(jù)文件，如步驟 3 所示，然后添加數(shù)據(jù)。
使用該函數(shù)創(chuàng)建一個圓形包裝圖實例，并將數(shù)據(jù)集傳遞到其中。circlePacking()
最后，為圖表指定一個標題，將其放在以前指定的容器中，然后使用命令顯示它。draw()
基于 JavaScript 的圓包裝圖已準備就緒！
您可以在任何圖表游樂場圖表上找到這個簡單JavaScript圓圈包裝圖表的交互式版本以及源代碼。隨意嘗試它。
為了您的方便，我還將完整的圓形包裝圖代碼放在下面。
我們可以立即從圓圈包裝圖中推斷出，大多數(shù)頂級億萬富翁來自美國，其次是中國。與此類似，我們也可以獲得有關(guān)行業(yè)以及凈資產(chǎn)金額的見解。
但是，這只是 JS 圓包裝圖的基本版本。圖形可以進一步定制，看起來更好(仍然沒有太多的麻煩)
帶有腳本的高級圓包裝圖
到目前為止，使用JS創(chuàng)建的圓形包裝圖已經(jīng)看起來令人賞心悅目。但偶爾，體面是不夠的。此外，在某些情況下，您可能需要調(diào)整圖表的外觀和功能。
幸運的是，您可以輕松自定義圓形包裝圖表以滿足您的需求和品味?，F(xiàn)在，我將演示您可能還想進行的一些快速自定義以改進可視化效果：
A. 自定義工具提示。
B.自定義外觀。
C. 自定義標題。
D. 自定義標簽。
A.自定義工具提示
當(dāng)我們將鼠標懸停在圓圈上時，將顯示凈值。讓我們自定義工具提示，使其包含更多信息。
現(xiàn)在我們可以清楚地看到億萬富翁圈子的名字，凈資產(chǎn)和財富來源，以及行業(yè)和國家集團的總凈資產(chǎn)價值。
B.自定義外觀
默認情況下，圖表的背景色為白色。讓我們將其更改為灰色。使用該功能可以輕松完成。background()
讓我們也使用該函數(shù)略微增加圓圈邊框的粗細。stroke()
這個JS圈包裝的互動版本可以在任何圖表游樂場上找到。根據(jù)需要更改顏色。
C. 自定義標題
圖表標題可以輕松增強。跟隨我，因為我只需啟用HTML并更改字體顏色，大小和粗細：
這是此標題增強后包裝圖的外觀：
D. 自定義標簽
目前，國家/地區(qū)的名稱以默認格式顯示。讓我們自定義它們，使它們以更優(yōu)雅的方式出現(xiàn)在框中：
圓形包裝圖現(xiàn)在看起來非常優(yōu)雅和漂亮。為什么不呢?畢竟，它被用來想象擁有數(shù)十億價值的人！
這個最終的JavaScript圓圈包裝圖表的完整源代碼可以在下面找到，也可以在任何圖表游樂場上找到。
結(jié)論
匪夷所思！我們的 JavaScript 圓圈包裝圖已經(jīng)構(gòu)建完成。這是一個簡單的過程，現(xiàn)在，繼續(xù)創(chuàng)建您自己的 JavaScript 圓圈包裝圖表可視化!圓形包裝圖文檔和圓形包裝圖示例分別為您提供進一步的說明和靈感。
此外，還有大量其他圖表類型可用，不要害怕看它們。你會驚訝于你也可以輕松地在JS中構(gòu)建它們！
最后，請不要猶豫，詢問查詢或提出建議。我期待著看到你將創(chuàng)建的JavaScript圓圈包裝圖表！
京公網(wǎng)安備 11010802030320號