jQuery
DataTables.js
Highcharts.js
HTML
为了解决问题，我们使用包含两个子元素的容器类定义一个元素：
一个有26行的表。 第一行引用表头，而其他25行引用国家详细信息。 这个例子的数据来源是worldometers.info。
一个空的div将保存图表。
这是HTML结构：
值得一提的是，为了简单起见，我们已经指定了上述硬编码表格数据。 但在实际项目中，表可能是动态创建的。
准备好标记后，为了清晰起见添加了背景颜色，项目如下所示：
CSS
在这一点上，我们定义了一些基本样式，如下所示：
了解这一点很重要：＃dt-table_wrapper在我们的标记中不存在。 一旦我们初始化它就由DataTables添加。
虽然我们为小屏幕定义了一些基本规则，但请注意，演示并不会完全响应。 我们可以做很多事情来使表格和图表在小屏幕上看起来更好。 例如，对于DataTables，可以使用响应式扩展，但这超出了本教程的范围。
提取表数据
为了检索所需的数据，我们将利用DataTables API。 负责此行为的函数如下：
在这个函数中，我们遍历表行，对于每一行，我们获取目标列数据并将它们存储在关联的数组中。 最后，所有这些数组都存储在另一个数组中。
默认情况下，getTableData函数应该从所有表行收集数据。 但是如果我们在表中搜索特定的内容，则只应收集和处理匹配的行。 为了完成这些，我们将一个参数传递给rows函数。
构建图表
现在我们已经拥有了所需的数据，我们已准备好构建图表。代码如下：
其中包含两个嵌套图表，一个柱形图和一个样条图。通过上一步获取表数据并构建，我们不想要所有的数据。 事实上你会注意到图表只包含前三列（国家，人口，密度）的数据，以下就是我们构建的最终图表。
我会在这里发布所有与科技、科学有关的有趣文章，欢迎订阅我的头条号。偶尔也回答有趣的问题，有问题可随时在评论区回复和讨论。
杨沐白
这里推荐一个js库—echarts.js，专门用于做数据可视化的，提供的图表类型众多，如下，而且带有丰富的示例和教程，很容易学习和掌握，下面我大概介绍一下这个js库的使用：
1.下载echarts.js，这里直接在官网http://echarts.baidu.com/download.html下载就行，很快就能下载成功，大概2兆多：
2.下载成功后，我们就可以进行echarts的测试了，这里测试的很简单，官方自带有示例和源码，我简单的介绍一下示例的使用过程，以下面这个例子为例，地址http://echarts.baidu.com/echarts2/doc/example/bar5.html：
测试代码如下，这里随便新建一个html文档，将步骤一下载好的echarts.js和这个html文档放在一个目录下边，只需将上面的示例代码复制到下图画框出就行：
用浏览器打开html文件，程序运行截图如下，已经成功绘制出所需图形：
官方其实还有更多示例，像饼图、散点图、树图、词云图、雷达图等，基本使用步骤和上面一致，感觉兴趣的可以自己试试，地址http://echarts.baidu.com/echarts2/doc/example.html。
这里就简单地介绍一下echarts.js的简单使用过程，算是入门级别的，至于如何在项目中使用，如何调整对应代码，这个需要自己研究一下，也不难，希望以上分享的内容能对你有所帮助吧。
