数据可视化结课作业

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

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.executemany('INSERT INTO epower VALUES (%s,%s)', datas)最后关闭连接，释放资源。2.2 FlaskFlask就是一个胶水层，将数据库和网页之间连接起来,这也是Python被称为“胶水语言”的一个体现。具体到项目，我们首先导入Flask类，然后我们使用 route() 装饰器告诉 Flask 什么样的URL 能触发我们的函数。用 Python 生成 HTML 十分无趣，而且相当繁琐，因为必须手动对 HTML 做转义来保证应用的安全。为此，F

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

6、：app.route("/powers", methods="GET")def powers(): if request.method = "GET": conn=pymysql.connect(host='localhost',user='root',passwd='root',db='stu2',port=3306,charset='utf8') cur=conn.cursor() cur.execute('select * from epow

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

8、。再将数据给到对应的数组里面，图表就生成出来了。异步加载代码如下： $.get('/powers',function (data) myChart.hideLoading(); myChart.setOption( xAxis: data: data.time , series: name: '用电量', / 根据名字对应到相应的系列 data: data.powers.map(parseFloat) ); );3 项目成果预览图 3-1 用电量分布折线图图 3-2 用电量分布柱状图4 项目中所遇到的问题4.1 网页中文乱码问题：在项目运行的时候，网页出现了中文

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

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