前言
本月初我在朋友圈里看到有很多朋友在分享全国翻译硕士及翻译本科办学院校最新名录（截至年2月），打开之后发现所有表格都是以一张张图片呈现的，很不容易阅读。这不假期已经快结束了，写篇文章给大家说说怎么把这篇文章的数据转变成能让人眼前一亮的动态图表。
比如这样的：
正文
一、数据准备阶段
第一步：将图表变成Excel表格
任何一个图表的基础都是表格，所以我们先花一点时间来处理上面那篇文章中的数据，如下：
一共是所学校。
第二步：将图表上传到服务器上的数据库中
因为我们要做的是一个动态图表，而且是在线的，这就意味着我们得用服务器来存储数据，方便我们用自己写的程序来调用数据库中的数据
在这一步中，先根据表格的内容撰写创建数据库的代码。
1)打开一个叫“NavicatforMySQL”的工具，新建一个数据表：
注：所用的代码如下：
CREATETABLEIFNOTEXISTS`mtibti`
(
`id`INTUNSIGNEDAUTO_INCREMENT,
`province`varchar(55)NOTNULL,
`university`varchar(55)NOTNULL,
`year_mti`int(11)NOTNULL,
`year_bti`int(11)NOTNULL,
PRIMARYKEY(`id`)
)
ENGINE=InnoDBDEFAULTCHARSET=utf8COLLATEutf8_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]=[year_mti]=[4]=0[year_bti]=0)
稍微调整一下格式：
Array(
[0]=2
[id]=2
[1]=安徽
[province]=安徽
[2]=安徽大学
[university]=安徽大学
[3]=
[year_mti]=
[4]=0
[year_bti]=0
)
打眼一看觉得很乱，这行数据在数据库中是这样的：
一共五列。
这里就要特别说明一下数组中给数据排位子的方式：从0开始数，而不是从1开始说。
我们自然得以为“id”是第一列，“province”是第二列，但是在数组中，“id”是第0列，“province”是第1列。所以在上面的数组中，[0]和[id]对应的内容都是“2”，[1]和“province”对应的内容都是“安徽”。
我们这里展示的数组叫“关联数组”，你可以看到“[province]=安徽”的中间有一个“=”符号，左边的叫“键”，右边的叫“键的值”。通过关联数组我们就可以非常方便的存储和获取我们想要的数据了。
但是这种格式的数据我们一般不显示在浏览器中去看，用数组的形式看起来太麻烦；而是根据我们的需要直接显示需要的数据。
四、用动态图表模板呈现数据
现在我们已经知道用什么样的方法可以把数据库存储的数据提取出来显示在浏览器中了，接下来我们就得给这些数据穿上漂亮的衣服把他们显示出来。
我们在这里首先介绍百度公司的“Echarts”，网址：