谢邀。在本教程中，您将学习如何利用DataTables.js和Highcharts.js等JavaScript库来可视化数据。这是大家要构建的内容（查看更大的版本以获得更好的体验）：
必需的库
出于此示例的目的，大家必须在scripts中加载以下库：
jQuery
DataTables.js
Highcharts.js
HTML
为了解决问题，大家使用包含两个子元素的容器类定义一个元素：
一个有26行的表。 第一行引用表头，而其他25行引用国家详细信息。 这个例子的数据来源是worldometers.info。
一个空的div将保存图表。
这是HTML结构：
值得一提的是，为了简单起见，大家已经指定了上述硬编码表格数据。 但在实际项目中，表可能是动态创建的。
准备好标记后，为了清晰起见添加了背景颜色，项目如下所示：
CSS
在这一点上，大家定义了一些基本样式，如下所示：
了解这一点很重要：＃dt-table_wrapper在大家的标记中不存在。 一旦大家初始化它就由DataTables添加。
虽然大家为小屏幕定义了一些基本规则，但请注意，演示并不会完全响应。 大家可以做很多事情来使表格和图表在小屏幕上看起来更好。 例如，对于DataTables，可以使用响应式扩展，但这超出了本教程的范围。
提取表数据
为了检索所需的数据，大家将利用DataTables API。 负责此行为的函数如下：
在这个函数中，大家遍历表行，对于每一行，大家获取目标列数据并将它们存储在关联的数组中。 最后，所有这些数组都存储在另一个数组中。
默认情况下，getTableData函数应该从所有表行收集数据。 但是如果大家在表中搜索特定的内容，则只应收集和处理匹配的行。 为了完成这些，大家将一个参数传递给rows函数。
构建图表
现在大家已经拥有了所需的数据，大家已准备好构建图表。代码如下：
其中包含两个嵌套图表，一个柱形图和一个样条图。通过上一步获取表数据并构建，大家不想要所有的数据。 事实上你会注意到图表只包含前三列（国家，人口，密度）的数据，以下就是大家构建的最终图表。
偶会在这里发布所有与科技、科学有关的有趣文章，欢迎订阅偶的头条号。偶尔也回答有趣的问题，有问题可随时在评论区回复和讨论。
（码字不易，若文章对你帮助可点赞支持~）
