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：“ //raw.githubusercontent.com/mekhatria/demo_highcharts/master/globalTemperatureChange.csv”，
}

在下面，您可以使用自定義代碼查看相同的數據和圖表類型（請參見下面的圖表）：

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數據模塊提供了一種現成的解決方案來獲取和處理數據。在大多數情況下，我們建議使用此選項。但是，如果需要進行特定處理，則始終可以使用自定義代碼。

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