将数据纳入图表的许多方法-css教程-PHP中文网

首页

web前端

css教程

将数据纳入图表的许多方法

Lisa Kudrow

Apr 21, 2025 am 09:20 AM

The Many Ways of Getting Data Into Charts

如今，数据无处不在，无论是纯文本文件、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

接下来，我们需要使用原生 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();

(...此处应插入图表渲染结果，但由于无法直接渲染，故省略...)