数据可视化结课作业

1、信息与电气工程学院数据可视化报告（2016/2017学年第二学期）专业班级：计算机 1403学生姓名：叶何斌学号：140210316设计成绩:2017年06月1日目录1 项目摘要 22 项目结构 22.1 数据库设计及实现 22.2 Flask 32.3 前端 33 项目成果预览 44 项目中所遇到的问题 54.1 网页中文乱码 54.2 图表在网页中不显示 5总结 511项目摘要本项目选取的数据集为一天的用电量分布，数据集是基于实际数据虚构的，因为数据量太庞大。虽然数据是虚构的但是也具有一定的代表性。数据中包括了一天各个时段的用电量情况。本可视化的主要目的是能够清晰地展示某一个地区 每天用电

2、量的变化，以便发电厂预测用电量，更好的调动发电机组。项目中主要使用的技术包括：MySql、Flask和Echarts。Echarts是一个商业级的图表库，项目中直接引用了 Echarts的JS文件。Flask是一个使用Python编 写的轻量级 Web应用框架，这个直接安装到Python环境里了。项目的大概思路就是首先运行创建数据库的 Python代码，创建好数据库之后。再运行读取数 据库的Python代码一readDatabase.py这个程序会去找html网页，之后打开浏 览器就能看到图表了。2项目结构2.1数据库设计及实现2.1.1数据库表表 1-1 epower 表属性名称数据类型可否

3、为空备注TimeVarchar(20)否时间PowersVarchar(20)否用电量2.1.2设计及实现数据库就有两个字段，一个时间，一个用电量。数据库比较简单，都是最基 本最基本的操作和实现。数据库插入数据是一个Python文件一create_data.py 首先配置好数据库连接的一些基本信息，然后在开始创建表。在创建表之前程序 检查一下表是否存在，如果存在就将表删除，重新创建。其中创建表的代码为：cur.execute('CREATE TABLE epower (time varchar(20),powers varchar(20)')数据是保存在一个数组里，实际上就是将

4、数组中的数据插入到数据库中去。 插入数据的代码为：cur.executema ny('INSERT INTO epower ALUES (%s,%s)', datas)最后关闭连接，释放资源2.2 FlaskFlask就是一个胶水层，将数据库和网页之间连接起来,这也是Python被称 为“胶水语言”的一个体现。具体到项目，我们首先导入Flask类，然后我们使用route() 装饰器告诉Flask什么样的URL能触发我们的函数。用Python 生成HTML十分无趣，而且相当繁琐，因为必须手动对HTML做转义来保证应用 的安全。为此，Flask配备了 Jinja2 模板引擎。所以我

5、使用render_template() 方法来渲染模板。代码如下：app.route("/", methods="GET")def in dex():returnre nder_template("i ndex.html")Flask会在templates 文件夹里寻找模板，也就是index.html 。然后主页异步加载数据，Flask识别URL中的powers就执行查询数据库的 代码，并将结果返回给主页面。其中的GETS求方法是指：浏览器告知服务器：只获取页面上的信息并发给我。代码如下：app.route("/powers

6、", methods="GET")def powers():ifrequest.method = "GET":conn=pymysql.co nn ect(host='localhost',user='root',passwd='root',db='stu2',port= 3306,charset='utf8')cur=c onn. cursor()cur.execute('select * from epower')res=cur.fetchall

7、()cur.close()conn. close()returnjs on ify(time = x0 for x in res,powers = x1 for x in res,)2.3前端前端的东西主要是包括两个部分：一个是数据图表的生成，还有一个就 是数据的异步加载。图表的生成就是两组数据，一个 X轴一个丫轴。都在对 应的数组里，Echarts负责将这些数组里面的数据以图表的方式体现出来。 前端稍微复杂点的就是异步加载数据了，其实也比较简单，就是刚刚说的 readDatabase.py文件里面会去读取数据然后给到前台页面，前台页面接收 到数据。再将数据给到对应的数组里面，图表就生成出来了

8、。异步加载代码 如下：$.get('/powers',function (data) myChart.hideLoadi ng();myChart.setOptio n(xAxis: data: data.time,series: name:用电量',/根据名字对应到相应的系列data: data.powers.map(parseFloat););3项目成果预览图3-1用电量分布折线图it市一顽亀好布色土笛图3-2用电量分布柱状图案市一<Cid4项目中所遇到的问题4.1网页中文乱码问题：在项目运行的时候，网页出现了中文的乱码。然后各种改网页的编码 格式，在html

9、的头部指定编码为 GBK或 GB2312都不行。原因及解决办法：因为Notepad+打开html网页文件时使用的ANSIC编码, 这就导致了整个中文的编码都变成了 ANSIC结果就造成了浏览器无法解析。然 后就用Notepad+将整个html文件转换成UTF-8的编码格式，再运行项目，中 文乱码的问题就解决了。4.2图表在网页中不显示冋题：网页正常打开，但是图表就是不显示。解决办法：使用另一个浏览器打开，图表正常显示。还有其他很多的小问题就不一一赘述了，例如：数据库写不进数据因为表名写错等等。5总结通过本次项目，从基本目标的定型到实践开发的过程，收获还是巨大的。 首 先感谢同学的耐心指导、 解

10、答在开发过程中遇到的困惑与问题， 并且在完成之后 还给我提供了一些合理的新功能的思路，使得程序一步一步得到了完善。其次是对一门新语言和新事物的认知和掌握。在没有任何实践经验的情况 下，通过本次项目，我花了较短的时间学习了 Python 。当然这和 Python 的语言 特点也是脱不了关系的。 除了一门新语言的简单掌握以及计算机网络编程的简单 实现，还锻炼了个人的学习以及动手能力。 以及通过老师模板和网络的帮助， 达 成了“提出问题 -分析问题 -解决问题”的解决途径。过去一直以为数据可视化需要复杂的算法或者对计算机底层原理有很高要 求的东西，通过本次数据可视化的项目， 让我对数据可是化有了一个全新的认识。 门槛可