如何實現(xiàn)用javascript把地圖可視化？

對于 JS 開發(fā)人員來說，可視化數(shù)據(jù)的能力與制作交互式網(wǎng)頁一樣有價值。特別是兩者經(jīng)常同時出現(xiàn)。隨著 JavaScript 在數(shù)據(jù)可視化領(lǐng)域的不斷普及，市場上甚至還會出現(xiàn)能夠為 Web 創(chuàng)建漂亮圖表的新庫。

對于可視化這里要考慮許多因素：

我想要什么樣的圖表？餅圖，地理圖，折線圖, 條形圖？

有些庫只支持少數(shù)幾種類型。首先要知道自己到底需要哪些。

數(shù)據(jù)集有多大？

基于 SVG 的庫通常更適合中小型數(shù)據(jù)集，因為每個元素都是唯一的節(jié)點并存在于 DOM 樹中。這也意味著它們允許被直接訪問，從而具有更多的靈活性。雖然你可以借助一些數(shù)據(jù)聚合算法、智能內(nèi)存管理和其他花哨的技巧使它們能夠處理大型數(shù)據(jù)集，但是使用基于 Canvas 的大型數(shù)據(jù)集工具是更可靠的選擇。Canvas 非常快。

該應(yīng)用是用于Web端、移動端還是兩者兼而有之？

有些庫在響應(yīng)性方面更好，而其他一些庫有自己的 React Native 版本，如 Victory。

瀏覽器支持給定的庫嗎？

你使用哪種 JavaScript 框架？

確保你的數(shù)據(jù)庫庫能夠順利運行。如果你在用 React，那么使用特定于 React 的庫可能比使用包裝器更好。

你需要什么樣的外觀？

如果你需要一些高級動畫，也應(yīng)該考慮到這一點。

能夠回答上面提到的問題，會很容易找到完美的開源解決方案。

1、D3.js

適用于：任何環(huán)境

GitHub：https://github.com/d3

2、Recharts

適用于：React

GitHub：https://github.com/recharts

3、Victory

適用于：React，React Native

https://github.com/FormidableLabs/victory

4、React-vis

適用于：React

https://uber.github.io/react-vis/

5、ApexCharts

適用于：React，Vue.js，純 JavaScript

GitHub：https://github.com/apexcharts

越來越多的數(shù)據(jù)可視化庫證明了可視化對于 Web 的重要性。希望這個列表可以幫助你在未來的項目中創(chuàng)建漂亮的圖表。祝好運！