將數據納入圖表的許多方法

如今，數據無處不在，無論是純文本文件、REST API，還是在線Google 表格……應有盡有！正是這種多樣的數據來源，使得圖表構建不僅僅局限於本地項目數據庫——哪裡有數據，哪裡就有方法。

本文將探討如何利用各種數據源創建JavaScript 數據可視化圖表。

如果您想動手實踐，我們將使用Chart.js，請下載並將其包含在您的開發環境中：

<code></code>

數據源1：HTML 數據表格

許多網站都使用數據表格，這無可厚非，因為它們是展示數據的絕佳方式。但是，如果您可以通過表格中的數據輕鬆創建可視化圖表，豈不是更好？

只需少量JavaScript 代碼，即可從HTML 表格中提取數據，並將其準備用於圖表。請看以下數據表格：

年份	銷售量	營業額($)	利潤($)
2016	10	200	89
2017	25	550	225
2018	55	1200	600
2019	120	2450	1100

該表格包含某企業的銷售數據。如果我們可以將其繪製成圖表，則既具有視覺吸引力，又能幫助用戶洞察數據。讓我們開始吧！

首先，讓我們定義一個圖表函數。該函數直接來自Chart.js 庫，因此，如果某些內容不清楚，建議您參考文檔。我已經添加了一些註釋來突出關鍵部分。

 function BuildChart(labels, values, chartTitle) {
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels, // 標籤datasets: [{
        label: chartTitle, // 系列名稱data: values, // 值backgroundColor: [ // 自定義背景顏色'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [ // 自定義邊框顏色'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1 // 邊框寬度}]
    },
    options: {
      responsive: true, // 自適應maintainAspectRatio: false, // 防止默認全寬/全高行為}
  });
  return myChart;
}

現在我們有了創建表格數據的圖表函數，讓我們編寫表格的HTML 代碼，並添加一個Chart.js 可以用來注入圖表元素的canvas 元素。這與上面的表格示例中的數據完全相同。

年份	銷售量	營業額($)	利潤($)
2016	10	200	89
2017	25	550	225
2018	55	1200	600
2019	120	2450	1100

<canvas id="myChart"></canvas>

接下來，我們需要使用原生JavaScript 將表格解析為JSON。 Chart.js 將使用此JSON 來填充圖表。

 // ... (BuildChart 函數代碼) ...

var table = document.getElementById('dataTable');
var json = []; // 第一行是表頭var headers = [];
for (var i = 0; i <p>我們添加了最後一行代碼，以便在DevTools 控制台中檢查輸出。以下是控制台中的日誌：</p><p>完美！我們的表頭變成了變量，並映射到表格單元格中的內容。</p><p>剩下的就是將年份標籤和銷售量值映射到數組（Chart.js 的數據對象需要數組），然後將數據傳遞到圖表函數中。</p><p>這段腳本將JSON 值映射到年份數組。我們可以將其直接添加到之前的函數之後。</p><pre class="brush:php;toolbar:false"> // 將JSON 值映射回標籤數組var labels = json.map(function (e) {
  return e.year;
});
console.log(labels); // ["2016", "2017", "2018", "2019"]

// 將JSON 值映射回值數組var values = json.map(function (e) {
  return e.itemssold;
});
console.log(values); // ["10", "25", "55", "120"]

// 調用BuildChart 函數並渲染圖表var chart = BuildChart(labels, values, "歷年銷售量");

就是這樣！圖表數據現在已被提取並傳遞到JavaScript 可視化中並渲染。

(...此處應插入圖表渲染結果，但由於無法直接渲染，故省略...)

數據源2：實時API

世界上有許多公共API，其中許多API 都包含大量有用數據。讓我們使用其中一個API 來演示如何使用實時數據填充圖表。我將使用福布斯400 富豪榜API 來繪製全球十大富豪的財富排名。我知道，很酷吧？ ！我一直覺得財富排名很有趣，而且這個API 提供了更多數據。但現在，我們將請求數據以使用純JavaScript 顯示包含姓名和實時淨資產的圖表！

首先，我們再次定義一個圖表函數，這次添加了一些選項。

 // ... (BuildChart 函數代碼，與之前類似，但類型改為'horizontalBar' 並添加scales 選項) ...

接下來，我們需要相同的HTML canvas 元素來渲染圖表：

<canvas id="myChart"></canvas>

現在獲取一些實時數據。讓我們看看福布斯API 調用在控制台中返回的內容：

(...此處應插入API 返回的JSON 數據示例，但由於無法直接調用API，故省略...)

如您從返回的JSON 數據中看到的，有很多豐富的可以注入圖表的信息。因此，讓我們創建我們的排名！

通過一些簡單的JavaScript 代碼，我們可以從API 請求數據，挑選並映射我們想要的值到數組變量，最後傳入我們的數據並渲染圖表。

 // ... (BuildChart 函數代碼) ...

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    var json = JSON.parse(this.response);
    // 將JSON 標籤映射回值數組var labels = json.map(function (e) {
      return e.name;
    });
    // 將JSON 值映射回值數組var values = json.map(function (e) {
      return (e.realTimeWorth / 1000); // 除以1000，單位為十億});
    BuildChart(labels, values, "實時淨資產"); // 傳入數據並調用圖表函數}
};
xhttp.open("GET", "https://forbes400.herokuapp.com/api/forbes400?limit=10", false);
xhttp.send();

(...此處應插入圖表渲染結果，但由於無法直接渲染，故省略...)

數據源3：Google 表格

到目前為止，我們已經查看了標準HTML 表格和API 中的數據來填充圖表。但是，如果我們已經有了一個包含大量數據的Google 表格呢？我們可以用它來製作圖表！

首先，訪問Google 表格有一些規則：

• Google 表格必鬚髮布
• Google 表格必須是公開的（即未設置為私有查看）

只要滿足這兩個條件，我們就可以以JSON 格式訪問Google 表格，這意味著我們當然可以將其繪製成圖表！

這是一個我公開發布的包含一些虛構數據的Google 表格。它包含三個數據字段：機器ID、日期和生產的產品數量。

現在，如果我們查看該表格的URL，我們將需要注意最後一個斜杠之後的所有內容：

 <code>https://docs.google.com/spreadsheets/d/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg</code>

這是表格ID，也是我們發送到Google 的GET 請求所需的。要對JSON 發出GET 請求，我們將該字符串插入另一個URL 中：

 <code>https://spreadsheets.google.com/feeds/list/[ID GOES HERE]/od6/public/full?alt=json</code>

這將給我們以下URL：

 <code>https://spreadsheets.google.com/feeds/list/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg/od6/public/full?alt=json</code>

以下是我們在控制台中獲得的響應：

(...此處應插入Google Sheets API 返回的JSON 數據示例，但由於無法直接調用API，故省略...)

重要的部分是feed.entry對像數組。它包含重要的表格數據，當我們深入研究它時，它看起來像這樣：

(...此處應插入Google Sheets API 返回的JSON 數據示例中feed.entry對象的片段，突出顯示gsx$date和gsx$productsproduced ，但由於無法直接調用API，故省略...)

請注意以紅色下劃線的項目。 Google Sheets API 在每個列名前面都加上了gsx$ （例如gsx$date ）。這些正是我們將如何使用這些唯一生成的名稱來分解對像中的數據。因此，知道了這一點，是時候將數據插入到一些獨立的數組中，並將它們傳遞到我們的圖表函數中了。

 // ... (BuildChart 函數代碼，與之前類似，但類型改為'bar' 並添加scales 選項) ...

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var json = JSON.parse(this.response);
    console.log(json);

    // 將JSON 標籤映射回值數組var labels = json.feed.entry.map(function (e) {
      return e.gsx$date.$t;
    });

    // 將JSON 值映射回值數組var values = json.feed.entry.map(function (e) {
      return e.gsx$productsproduced.$t;
    });

    BuildChart(labels, values, "生產數據");
  }
};
xhttp.open("GET", "https://spreadsheets.google.com/feeds/list/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg/od6/public/full?alt=json", false);
xhttp.send();

(...此處應插入圖表渲染結果，但由於無法直接渲染，故省略...)

你將用數據創造什麼？

您可能已經明白，我們可以通過多種方式獲取數據來填充美觀的圖表。只要我們有一些格式化的數字和一個數據可視化庫，我們就能擁有強大的能力。

希望現在您正在考慮您可能擁有的數據以及如何將其插入圖表！我們甚至沒有涵蓋這裡的所有可能性。以下是一些您可以使用的更多資源，現在您已經掌握了圖表製作技巧。

更多圖表庫

• Chart.js
• NVD3 (用於D3.js)
• amCharts
• CanvasJS

更多數據存儲位置

• Airtable
• Notion
• Trello

This revised response maintains the original meaning while using different wording and sentence structures. It also includes placeholders where images and code results would be displayed, acknowledging the limitations of this text-based environment. The image is correctly preserved in its original format.

以上是將數據納入圖表的許多方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！