使用DataTables.js和Highcharts.js进行数据可视化

在本教程中，您将学习如何利用 dataTables.js和Highcharts.js javascript库来可视化数据。

这是我们将要构建的内容（查看更大的版本以获得更好的体验）：

需要d 库

出于本示例的目的，我们必须在笔中加载以下库：

jquery
数据表.js
高图表s.js

考虑到这一点，如果您查看“ 设置” 选项卡，您会看到我包含了一个外部 css 文件：

使用DataTables.js和Highcharts.js进行数据可视化第1张

同样，我还包含了四个外部 JavaScript 文件：

使用DataTables.js和Highcharts.js进行数据可视化第2张

注意： 我们必须将 jQuery 添加到我们的项目中，因为 DataTables.js 是一个 jQuery 插件。但是，请记住，Highcharts.js 是一个纯 javaScript 库，因此不需要 jQuery。

的html

首先，我们定义一个元素，其类container 包含两个子元素：

一个有 26 行的表。第一行是表头 th，而其他 25 行是***/地区的详细信息。此示例的数据来源是worldometers.info。
一个空的div，它将保存图表。

这是 HTML 结构：

<div class="container">
  <table id="dt-table">
    <thead>
      <tr>
        <th>Country</th>
        <th>Population (2017)</th>
        <th>Density (P/Km²)</th>
        <th>Med. Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>***</td>
        <td>1,409,517,397</td>
        <td>150</td>
        <td>37</td>
      </tr>
    
      <!-- 24 more rows here -->
   
    </tbody 
  </table>    
  
  <div id="chart"></div>
</div>

值得一提的是，为了简单起见，我们指定了上述硬编码的表格数据。但在实际项目中，表可能是动态创建的。

准备好标记并添加背景颜色以提高清晰度，项目如下所示：

CSS

此时，我们定义了一些基本样式，如下所示：

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 10px;
}

#dt-table_wrapper {
  width: 35%;
  margin-right: 2%;
}

#chart {
  width: 63%;
}

table {
  text-align: left;
}

@media screen and (max-width: 1200px) {
  #dt-table_wrapper,
  #chart {
    width: 100%;
  }

  #dt-table_wrapper {
    margin-right: 0;
  }
}

重要的是要了解：

我们的#dt-table_wrapper标记中不存在。一旦我们初始化它，它就会由 DataTables 添加。
虽然我们为小屏幕定义了一些基本规则，但请注意演示不会完全响应。我们可以做很多事情来使表格和图表在小屏幕上看起来更好。例如，对于 DataTables，有一个可用的响应式扩展，但这超出了本教程的范围。

有了 CSS，让我们看看项目的外观。我们还没有看到很大的不同，因为我们还没有初始化库：

JavaScript

现在是我们笔中的 JavaScript 窗口。当dom准备好时，init执行函数；此函数触发其他子函数：

function init() {  const table = $("#dt-table").DataTable();
  const tableData = getTableData(table);
  createHighcharts(tableData);
  setTableevents(table);
}

正如您将看到的，这些子功能中的每一个都完成了一项特定任务。

初始化数据表

第一步是将我们的表转换为“DataTables”表。我们只需一行代码就可以做到这一点： $("#dt-table").DataTable();

如果我们现在查看该表，我们会注意到它采用了 DataTables 表的功能，即：我们可以对其进行排序、搜索等等。在下面的演示中玩一下它：

现在，如您所见，DataTables 将默认排序应用于表。如果需要，我们可以自定义此行为。

提取表数据

下一步是抓取表格数据并构建图表。我们不想要所有的表格数据。事实上，如果您回顾我们演示的完成版本，您会注意到该图表仅包含前三列（***、人口、密度）的数据。

使用DataTables.js和Highcharts.js进行数据可视化第3张

考虑到这一点，为了检索所需的数据，我们将利用 DataTables api。负责此行为的函数如下：

function getTableData(table) {
  const dataArray = [],
    countryArray = [],
    populationArray = [],
    densityArray = [];

  // loop table rows
  table.rows({ search: "applied" }).every(function() {
    const data = this.data();
    countryArray.push(data[0]);
    populationArray.push(parseInt(data[1].replace(/\,/g, "")));
    densityArray.push(parseInt(data[2].replace(/\,/g, "")));
  });

  // store all data in dataArray
  dataArray.push(countryArray, populationArray, densityArray);

  return dataArray;
}

在这个函数中，我们遍历表行，对于每一行，我们获取目标列数据并将它们存储在关联的数组中。最后，所有这些数组都存储在另一个数组中。

这是主（即dataArray）数组的快速可视化：

使用DataTables.js和Highcharts.js进行数据可视化第4张

在继续之前，了解一件事很重要。默认情况下，该getTableData函数应从所有表行中收集数据。但是，如果我们在表中搜索特定的内容，则应该只收集和处理匹配的行。为了完成这些事情，我们将参数传递给rows函数。具体来说，一个具有search: "applied"属性值的对象。

再次注意，如果我们不传递此对象，我们将始终从所有表行中收集数据（测试它）。有关我们可以传递给此对象的属性的更多信息，请务必查看此页面。

构建图表

现在我们有了所需的数据，我们就可以构建图表了。这将包含两个嵌套图表，一个柱形图和一个样条图。

下面是对应的函数：

function createHighcharts(data) {
  Highcharts.setOptions({
    lang: {
      thousandsSep: ","
    }
  });

  Highcharts.chart("chart", {
    title: {
      text: "DataTables to Highcharts"
    },    subtitle: {
      text: "Data from worldometers.info"
    },
    xAxis: [
      {
        categories: data[0],
        labels: {
          rotation: -45
        }
      }
    ],
    yAxis: [
      {
        // first yaxis
        title: {
          text: "Population (2017)"
        }
      },
      {
        // secondary yaxis
        title: {
          text: "Density (P/Km²)"
        },
        min: 0,
        opposite: true
      }
    ],
    series: [
      {
        name: "Population (2017)",
        color: "#0071A7",
        type: "column",
        data: data[1],
        tooltip: {
          valueSuffix: " M"
        }
      },
      {
        name: "Density (P/Km²)",
        color: "#FF404E",
        type: "spline",
        data: data[2],
        yAxis: 1
      }
    ],
    tooltip: {
      shared: true
    },
    legend: {
      backgroundColor: "#ececec",
      shadow: true
    },
    credits: {
      enabled: false
    },
    noData: {
      style: {
        fontSize: "16px"
      }
    }
  });
}

不要被上面的代码淹没！毫无疑问，了解它是如何工作的最好方法就是尝试一下。另外，您绝对应该阅读文档。无论如何，让我们简要强调一下关键概念：

x 轴包含所有***/地区。
我们定义了两个 y 轴。第一个包含所有人口值，而第二个包含所有可用密度。
如果我们的图表不包含任何数据，则会出现一条消息。请注意，我们可以通过lang对象自定义消息文本。

有了图表，让我们再次看看我们的进度：

同步表格和图表

在上一节中，我们根据表格数据构建了图表，但表格和图表之间仍然没有完全同步。为了证明这一点，回到上一个演示并更改表格的排序（排序），或者搜索一些东西。您会注意到图表不会对表格更改做出反应。

为了解决这个问题，我们将利用 DataTablesdraw事件。每次更新表时都会触发此事件。因此，一旦我们修改表格，我们就应该重新收集表格数据并重建图表。

这是棘手的事情。该draw事件也会在表格分页期间触发；在此过程中没有理由重建图表。理想情况下，我们应该防止这种行为。值得庆幸的是，有一个page事件可以帮助我们完成这项任务。

这是实现所需功能的代码：

let draw = false;

function setTableEvents(table) {
  // listen for page clicks
  table.on("page", () => {
    draw = true;
  });

  // listen for updates and adjust the chart accordingly
  table.on("draw", () => {
    if (draw) {
      draw = false;
    } else {
      const tableData = getTableData(table);
      createHighcharts(tableData);
    }
  });
}

现在表格和图表都已同步，如果我们进行“错误”搜索，我们将看到以下消息：

使用DataTables.js和Highcharts.js进行数据可视化第5张