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

點擊下載Highcharts最新試用版

在本文中，我們將比較兩種方法來可視化CSV文件中的數(shù)據(jù)：

• 使用data.cvsURL的精選Highcharts數(shù)據(jù)模塊API解決方案。
• 使用純JavaScript編寫的自定義解析器，在高級情況下具有更大的靈活性。

無論選擇哪種方式，在處理數(shù)據(jù)時都必須通讀基礎(chǔ)知識，例如查找數(shù)據(jù)源，加載數(shù)據(jù)和處理數(shù)據(jù)。

備注

在我們的文檔和API中，您可以找到許多示例和解決方案，使您可以開始工作/處理數(shù)據(jù)。

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

1.數(shù)據(jù)來源

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

2.數(shù)據(jù)加載

要開始使用數(shù)據(jù)，我們需要將其加載到腳本中。對于內(nèi)置的Highcharts解決方案，這就像設(shè)置data.cvsURL選項一樣簡單。

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

3.數(shù)據(jù)解析

如果您使用內(nèi)置的Highcharts解決方案，那么數(shù)據(jù)模塊將使您免去進行數(shù)據(jù)解析的麻煩，并且您可以直接跳到“數(shù)據(jù)可視化”部分（請參見第4.節(jié)“數(shù)據(jù)可視化”）。

但是，對于自定義解決方案，有各種JavaScript庫可以解析CSV。通過解析，我們的意思是找出所有逗號的位置，分解數(shù)據(jù)，并將其放入對象中以使其可用。對于此數(shù)據(jù)集，使用split函數(shù)手動進行解析非常簡單。順便說一句，JavaScript變量中的一段文本是一個字符串對象，并且具有稱為split的功能。該函數(shù)允許您獲取任意文本并將其拆分為數(shù)組的不同元素。這基本上就是我們想要做的；我們要拆分所有行，然后在每一行中拆分所有列。split函數(shù)僅需要一個參數(shù)-分隔符或稱為定界符。在這種情況下，我們有兩種定界符。對于每一行，將一行與另一行區(qū)分開的定界符是一個換行符。所以首先 讓我們用換行符將其稱為split。同樣，我們不需要第一行–第一行對于我們?nèi)祟悂碚f確實是有用的信息，他們可以考慮數(shù)據(jù)是什么，但是對于這種用途，我們希望將年份作為一個類別。

現(xiàn)在，重要的是要知道這些數(shù)據(jù)是干凈的：沒有空日期，沒有錯誤，沒有空塊。但是，如果數(shù)據(jù)中有逗號，則此解析系統(tǒng)將崩潰。即使對于CSV文件有約定，在不應(yīng)拆分的信息周圍都使用引號，但在其中有逗號的地方，您始終必須檢查數(shù)據(jù)。您還可能會發(fā)現(xiàn)您的數(shù)據(jù)尚未采用CSV格式，因此請確保手動或通過CSV轉(zhuǎn)換器/清理器工具消除數(shù)據(jù)中不必要的空格和逗號。.這可能需要做很多工作進入分析和清理項目的數(shù)據(jù)。

4.數(shù)據(jù)可視化

現(xiàn)在，我們準備使用簡單的折線圖來可視化數(shù)據(jù)。
對于專用的Highcharts解決方案，數(shù)據(jù)托管在GitHub中，并且只需一行代碼即可提取數(shù)據(jù)（由于data-module）：

data:{
  csvURL：“ //raw.githubusercontent.com/mekhatria/demo_highcharts/master/globalTemperatureChange.csv”，
}

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

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的形式加載表格數(shù)據(jù)并將其可視化。我們必須經(jīng)歷數(shù)據(jù)處理，然后在圖表上顯示數(shù)據(jù)。在第一個演示中，Highcharts數(shù)據(jù)模塊提供了一種現(xiàn)成的解決方案來獲取和處理數(shù)據(jù)。在大多數(shù)情況下，我們建議使用此選項。但是，如果需要進行特定處理，則始終可以使用自定義代碼。

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