如何做出让别人眼前一亮的酷炫动态图表

前言

本月初我在朋友圈里看到有很多朋友在分享全国翻译硕士及翻译本科办学院校最新名录（截至2018年2月），打开之后发现所有表格都是以一张张图片呈现的，很不容易阅读。这不假期已经快结束了，写篇文章给大家说说怎么把这篇文章的数据转变成能让人眼前一亮的动态图表。

比如这样的：

正文

一、数据准备阶段

第一步：将图表变成Excel表格

任何一个图表的基础都是表格，所以我们先花一点时间来处理上面那篇文章中的数据，如下：

一共是399所学校。

第二步：将图表上传到服务器上的数据库中

因为我们要做的是一个动态图表，而且是在线的，这就意味着我们得用服务器来存储数据，方便我们用自己写的程序来调用数据库中的数据

在这一步中，先根据表格的内容撰写创建数据库的代码。

1) 打开一个叫“Navicat for MySQL”的工具，新建一个数据表：

注：所用的代码如下：

CREATE TABLE IF NOT EXISTS `mtibti`

(

`id` INT UNSIGNED AUTO_INCREMENT,

`province` varchar(55) NOT NULL,

`university` varchar(55) NOT NULL,

`year_mti` int(11) NOT NULL,

`year_bti` int(11) NOT NULL,

PRIMARY KEY ( `id` )

)

ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE utf8_general_ci;

2) 然后将Excel表格中的数据导入其中

导入结果如下：

这样一来我们就有一堆可以去把玩儿的数据了。

二、数据库连接阶段

数据存储在数据库中，要想通过程序获取服务器中数据里的数据，就需要连接数据库。

以下是我常用的连接数据库的几个模板文件：

db_credentials.php

注：该文件用于记录服务器地址、数据库名、用户名、用户密码

database.php

注：该文件用户验证数据库是否连接成功

initialize.php

注：该文件用于定义几个基本的文件路径和建立数据库连接

我将服务器的用户名和密码填入到模板中，然后将这些文件传到服务器中的“private”文件夹下：

三、读取数据库中的数据

现在连接数据库的准备工作已经完成，接下来我就准备读取数据库中的数据。我在服务器的根目录下新建一个空白的文件：index.php

并在其中输入以下代码：

这段代码的功能是这样的：

第1行：连接服务器

第5行：选择数据库

第6行：将字符集设置为“utf8”，这样读取中文时不会出现乱码

第8行：撰写一条查询语句，该语句的功能是从数据表“mtibti”中读取所有数据

第9行：执行上面一行的查询语句，并将查询结果的编号放到“$result”这个东西里面等待使用

第11行括号内：根据上面一句获得查询结果编号提取里面的数据，并将数据放到“$line”这个东西里面；在我们这里可以认为“$line”里面的数据就是一个一行一行的“Excel表格”。

第11行至14行：逐行读取“$line”里面的每一行数据，并只显示“university”那一列的所有内容

这段代码执行的结果如下：

接下来我们来深入分析一下从数据库中获取到的数据。既然“$line[university]”可以获得所有“university”一列的数据，那么“$line[province]”肯定能获取所有“province”一列的数据。这些数据是以什么样的形式组织在一起的呢？

在上面第11行代码的括号内，我们用了一个叫“mysql_fetch_array”的功能，倘若我们把11-14行的代码换成如下的内容：

运行后效果如下：

这里面密密麻麻显示出了很多数据，但是数据呈现的形式似乎与Excel表格中不一样，这种形式叫“数组”（英文名为：array）。

我们可以把数组理解成“数据的组合”，组合起来的内容都放到Array()之中，比如这其中第一行数据的形式为：

Array ( [0] => 2 [id] => 2 [1] => 安徽 [province] => 安徽 [2] => 安徽大学 [university] => 安徽大学 [3] => 2010 [year_mti] => 2010 [4] => 0 [year_bti] => 0 )

稍微调整一下格式：

Array (

[1] => 安徽

[province] => 安徽

[2] => 安徽大学

[university] => 安徽大学

[3] => 2010

[year_mti] => 2010

[year_bti] => 0

)

打眼一看觉得很乱，这行数据在数据库中是这样的：

一共五列。

这里就要特别说明一下数组中给数据排位子的方式：从0开始数，而不是从1开始说。

我们自然得以为“id”是第一列，“province”是第二列，但是在数组中，“id”是第0列，“province”是第1列。所以在上面的数组中，[0]和[id]对应的内容都是“2”，[1]和“province”对应的内容都是“安徽”。

我们这里展示的数组叫“关联数组”，你可以看到“[province] => 安徽 ”的中间有一个“=>”符号，左边的叫“键”，右边的叫“键的值”。通过关联数组我们就可以非常方便的存储和获取我们想要的数据了。

但是这种格式的数据我们一般不显示在浏览器中去看，用数组的形式看起来太麻烦；而是根据我们的需要直接显示需要的数据。

四、用动态图表模板呈现数据

现在我们已经知道用什么样的方法可以把数据库存储的数据提取出来显示在浏览器中了，接下来我们就得给这些数据穿上漂亮的衣服把他们显示出来。

为了给大家直观演示这个东西是什么，大家可以去这个地址查看样例：http://echarts.baidu.com/examples/

如图：

简单来说，可以认为百度给大家提供了一堆好看的动态图表的模板，你只要有数据，就可以把数据放到这些模板中，让他们漂漂亮亮的显示出来。所谓“文不如表，表不如图”，用图表的形式能够直观反映你想表达的内容，何乐而不为呢？

接下来我给大家举一个例子：如何用线图呈现从2007年到2017年翻译专业硕士和翻译专业本科学校开办的趋势。

首先，我从百度的Echart模板中选取一个堆叠区域图模板，如下：

如果你想直接看这个模板的话可以前往下面这个链接：

http://echarts.baidu.com/examples/editor.html?c=area-stack&theme=light

在这个模板中，左侧是源代码，右侧是图表呈现的形式

我将源码稍微改一下内容，就变成了这样：

而且，在网页中鼠标移上去还会有特效：

显然这种图表比传统的用Excel绘制的图表要更方便展示在电脑屏幕和手机屏幕中。

我是如何做到稍微一修改数据就能呈现上面的效果呢？

根源就在模板左侧的源代码中：

也许你从没有见过这种代码，但是你可以在这些代码中看到很多数据，这些数据就是我们想呈现在图表中的数据。

百度的这个Echarts用了一种名为“json”的数据交换格式，样例如下：

{

"employees": [

{ "firstName":"Bill" , "lastName":"Gates" },

{ "firstName":"George" , "lastName":"Bush" },

{ "firstName":"Thomas" , "lastName":"Carter" }

]

}

在这个样例中冒号“:”是个很重要的分隔符，冒号的左侧是“键”，右侧是“键的值”，由此可以把一对数据存储在一起。

也就是说，如果我们能够把服务器上的数据库中的数据提取出来，转换成这种“json”格式的数据，那么就可以在百度的Echarts模板中显示出来。

五、将服务器中的数据转换为“json”格式

为了把刚才我们想做的图表做出来，我们必须有以下一些数据：2008年MTI学校的数量、BTI学校的数量；2009年MTI学校的数量、BTI学校的数量......

所有，我们先要计算出这些数字来：

上图是计算2007年MTI学校数量的代码，第8-10行分别对应的是：

撰写一条查询语句，用于提取所有“MTI获批招生年份”等于“2007”的结果；

执行上面这个语句；

用mysql_num_rows这个功能计算结果的数目，并将这个数目存储到“$mti_2007_num”之中。

以此类推我们可以获得所有年份对应的MTI院校数量和BTI院校数量。不过写代码可不能以此类推，不能把上面的代码全称重复的写20遍，而是要用一个循环来处理，如下：

运行结束后结果如下：

然而，即便这样，也没有达到我们想要的效果，因为我们需要的是“json”格式的数据。

所以我还要继续调整代码，接下来的代码就要稍微复杂一些了：

我简单说一下上面这段代码的功能：

第8行：创建一个空白的变量，用于存储最终的“json”格式的MTI院校的数据

第9行：创建一个空白的数组，用于存储MTI院校的开办年份和当年新增院校数量

第11行：创建一个叫“MTI”的“类”（英文名为“class”），这是面向对象的编程中一个非常重要的概念，但这里我就不多介绍了，你可以理解为这是一个“模子”

第12行-13行：在这个模子中有两个属性，分别是“year”和“number”，前者代表开办年份，后者代表对应年份新增院校数量

第16行-20行上面已经介绍过，用来循环计算每一个年份的新增院校的数量

第22行：我们在11行里创建了一个叫“MTI”的模子，现在我们要用这个模子来做“蛋糕”，每个“蛋糕”都有两个属性。每一个“蛋糕”的名字都叫“$MTI”

第23行-24行：对于每一个我们做出来的“蛋糕”，它的“year”属性值都等于“$i”的值，它的“number”属性值都等于“$num”的值

第25行：我们把每一个做好的“蛋糕”（如“2007”=>“15”）都逐一的放到$mti_array[]之中，这样一来当循环结束后，从2007年到2017年的所有数据都以数组的形式存储到了一起

第28行：用json_encode这个方法，将我们上面获得数组转变成“json”格式，然后放到$mti_data之中。

最后将$mti_data显示出来，如下图：

我们把这段代码再复用到“BTI院校”中：

最后的结果如下：

六、将“json”格式的数据送给“Echarts”去显示

接下来到了非常关键的一步了，如何把“Echarts”的模板用于我们当前获得的数据上。

我们首先要“安装Echarts”，方法如下：

下载下图中标明的文件：

并把它存储在服务器根目录下的“js”文件夹中，如下图：

这个文件并不大，只有600多KB。这样就算安装完成了。

然后创建一个新的文件，命名为trend.php文件，并添加以下代码：

这只是一个官方给的模板，我们还没有开始基于它来嵌入我们的数据。

接下来要做的就是仔细看一下这个模板，看看我们要修改的是哪部分的内容：

注意看我们最开始在浏览器中使用Echarts模板时左侧的源代码区：

你会发现第一行是：option = {

而在我们从官方拿到的模板中也会看到：

也就是说，如果想用那个能展现MTI、BTI发展趋势的模板，我们只需要把option = {}这段代码粘贴过来到trend.php这个网页中即可，我们来看一下效果：

果然能够将模板这样迁移到自己的网页中。

下面就是更为关键的一步了，将数据库中提取出来的“json”格式的数据与上面这个模板相结合。

1) 明确知道我们从index.php中获取到了什么数据

2）我们的Echarts模板为了盛放上面这些数据需要做哪些改进

第二个问题简单一些，先看第二个。我们的模板横轴是周一到周日，而我们希望横轴是2007-2017，所以这个要改；我们的模板上一共有5条线，而我们一共只需要两条线，所以这个也要改。

其他就没有什么改动了，我们去模板对应的位置将这些信息手动修改一下：

现在数据都还是错误的，但是横轴和纵轴都正确了。

在源代码中，我们需要修改的数据在这里：

两行醒目的红色数据就是我们现在要替换掉的内容，上面一行我们要用MTI院校的数据来替换，下面一行我们要用BTI院校的数据来替换。

下面我们先对上面一行的数据进行处理，在trend.php中添加以下代码：

这段代码中用了一个叫“Ajax”的技术来获取index.php页面执行后产生的“json”数据。

注：为了方便按照这个文章进行操作的同学更好的了解这个过程，接下来我将把“index.php”改为“mti.php”，并将其中产生“BTI院校数据”的代码放到“bti.php”这个页面中，如下：

mti.php

bti.php

然后在trend.php文件中分别使用这两个文件获得MTI院校的数据和BTI院校的数据：

下方的代码也相应调整，将原先红色的数据用上面这段代码中产生的变量的值来替代，如下：

下面我们来运行trend.php这段代码：

我们再来看一个动态的：

仔细看的话你会发现这个图也有问题，比如2010年MTI院校是117，BTI院校是12，但是这个图显然不是这样的。

事实上这不是数据的问题，而是我们选用的模板的参数问题。稍微调整一下其中的参数即可：