比較兩種方法來可視化CSV文件中的數據

Highcharts是一款純JavaScript編寫的圖表庫，爲你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極座標圖等幾十種圖表類型。

慧都下載Highcharts最新試用版

在本文中，咱們將比較兩種方法來可視化CSV文件中的數據：
使用data.cvsURL的精選Highcharts數據模塊API解決方案。
使用純JavaScript編寫的自定義解析器，在高級狀況下具備更大的靈活性。
讓咱們開始吧
不管選擇哪一種方式，在處理數據時都必須通讀基礎知識，例如查找數據源，加載數據和處理數據。

備註

在咱們的文檔和API中，您能夠找到許多示例和解決方案，使您能夠開始工做/處理數據。

咱們將使用來自NASA（國家航空航天局）的數據集，特別是來自NASA戈達德空間研究所的數據集。想法是可視化CSV文件，其中包括1880年至2019年的全球平均溫度。

1.數據來源

讓咱們獲取Zonal年均CSV文件，將其存儲在GitHub上以用於專用的Highcharts解決方案，並在本地以自定義方式使用。CSV文件包含幾列：Year，Glob，Nhem，北半球等。這些列用逗號分隔。該文件並非真的要讓人可讀。您能夠經過多種方式查看更易於閱讀的CSV文件。例如，在自定義演示中，您可使用Highcharts導出數據模塊來查看數據以電子表格格式的外觀，咱們強烈建議將其用於此目的。

2.數據加載

要開始使用數據，咱們須要將其加載到腳本中。對於內置的Highcharts解決方案，這就像設置data.cvsURL選項同樣簡單。

對於自定義解析器，咱們將使用Fetch API標準。咱們還將對現代瀏覽器支持的自定義解決方案使用await和async語法。使用JavaScript的最新功能時，請記住檢查瀏覽器的容量。當您想得到較舊瀏覽器的支持時，最好將代碼編譯爲較舊的ES5語法。

3.數據解析

若是您使用內置的Highcharts解決方案，那麼數據模塊將使您免去進行數據解析的麻煩，而且您能夠直接跳到「數據可視化」部分（請參見第4.節「數據可視化」）。

可是，對於自定義解決方案，有各類JavaScript庫能夠解析CSV。經過解析，咱們的意思是找出全部逗號的位置，分解數據，並將其放入對象中以使其可用。對於此數據集，使用split函數手動進行解析很是簡單。順便說一句，JavaScript變量中的一段文本是一個字符串對象，而且具備稱爲split的功能。該函數容許您獲取任意文本並將其拆分爲數組的不一樣元素。這基本上就是咱們想要作的；咱們要拆分全部行，而後在每一行中拆分全部列。split函數僅須要一個參數-分隔符或稱爲定界符。在這種狀況下，咱們有兩種定界符。對於每一行，將一行與另外一行區分開的定界符是一個換行符。因此首先 讓咱們用換行符將其稱爲split。一樣，咱們不須要第一行–第一行對於咱們人類來講確實是有用的信息，他們能夠考慮數據是什麼，可是對於這種用途，咱們但願將年份做爲一個類別。

如今，重要的是要知道這些數據是乾淨的：沒有空日期，沒有錯誤，沒有空塊。可是，若是數據中有逗號，則此解析系統將崩潰。即便對於CSV文件有約定，在不該拆分的信息周圍都使用引號，但在其中有逗號的地方，您始終必須檢查數據。您還可能會發現您的數據還沒有采用CSV格式，所以請確保手動或經過CSV轉換器/清理器工具消除數據中沒必要要的空格和逗號。.這可能須要作不少工做進入分析和清理項目的數據。

4.數據可視化

如今，咱們準備使用簡單的折線圖來可視化數據。
對於專用的Highcharts解決方案，數據託管在GitHub中，而且只需一行代碼便可提取數據（因爲data-module）：
data:{
csvURL：「 https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/globalTemperatureChange.csv」，
}
Highcharts數據模塊爲您完成了全部繁重的工做，以獲取，處理和準備要可視化的數據。是的，就是這麼簡單.
在下面，您可使用自定義代碼查看相同的數據和圖表類型（請參見下面的圖表）：

即便圖表看起來類似，但幕後的代碼卻不一樣。如今，再也不須要一行數據來使用數據模塊來獲取數據，而是具備針對同一做業的完整功能：
async function getData() {
const date = [],
globalTemp = [],
northernTemp = [],
southernTemp = [],
response = await fetch('../ZonAnn.Ts+dSST.csv'),
data = await response.text(),
rows = data.split(/\n/).slice(1);

rows.forEach(element => {
const row = element.split(','),
year = row[0],
gt = +row[1],
nt = +row[2],
st = +row[3];

date.push(year);
globalTemp.push(gt);
northernTemp.push(nt);
southernTemp.push(st);

})

return {
date,
globalTemp,
northernTemp,
southernTemp
}
}
上面的函數從本地存儲中獲取數據，對其進行清理，處理，而後以四個不一樣的數組返回結果。
對於這兩個示例，其想法都是以CSV的形式加載表格數據並將其可視化。咱們必須經歷數據處理，而後在圖表上顯示數據。在第一個演示中，Highcharts數據模塊提供了一種現成的解決方案來獲取和處理數據。在大多數狀況下，咱們建議使用此選項。可是，若是須要進行特定處理，則始終可使用自定義代碼。

咱們鼓勵您使用從本文中學到的知識來建立具備不一樣數據和技術的交互式圖表。隨時歡迎您在本文下提出您的問題和意見。

APS幫助提高企業生產效率，真正實現生產計劃可視化呈現與控制,快速有效響應不一樣場景的生產計劃，提升準時交貨能力，提升產能和資源利用率

想要購買Highcharts正版受權，或瞭解更多產品信息請點擊【諮詢在線客服】