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正版授權，或瞭解更多產品信息請點擊【諮詢在線客服】