数据可视化结课作业任务

《数据可视化结课作业任务》由会员分享，可在线阅读，更多相关《数据可视化结课作业任务（11页珍藏版）》请在装配图网上搜索。

1、信息与电气工程学院数据可视化报告（2016/2017 学年第二学期）专业班级： 计算机1403学生姓名： 叶何斌学 号：140210316设计成绩 :2017年06月1日目录1项目摘要32项目结构32.1数据库设计及实现32.2 Flask42.3前端53项目成果预览54项目中所遇到的问题74.1网页中文乱码74.2 图表在网页中不显示 75总结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 表属性名称数据类型可否为空备注Tim

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

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

6、ymysql.c onn 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()cur.close() conn. close() return jsonify(time = x0 for x in res, powers = x1 for x in res, )2.3前端前端的东西主要是包括两个部分：一个是数据图表的生成，还有一个就 是数据的异步加载。图表的生成就

7、是两组数据，一个X轴一个丫轴。都在对 应的数组里，Echarts负责将这些数组里面的数据以图表的方式体现出来。 前端稍微复杂点的就是异步加载数据了，其实也比较简单，就是刚刚说的 readDatabase.py文件里面会去读取数据然后给到前台页面，前台页面接收 到数据。再将数据给到对应的数组里面，图表就生成出来了。异步加载代码 如下：$.get(/powers,function (data) myChart.hideLoadi ng();myChart.setOptio n(xAxis: data: data.time，series: name:用电量,/根据名字对应到相应的系列data: da

8、ta.powers.map(parseFloat) )；)；3项目成果预览图3-1用电量分布折线图图3-2用电量分布柱状图豪市一天用唱分布CU4项目中所遇到的问题4.1网页中文乱码问题：在项目运行的时候，网页出现了中文的乱码。然后各种改网页的编码 格式，在html的头部指定编码为 GBK或GB2312都不行。原因及解决办法：因为 Notepad+ 打开html网页文件时使用的 ANSIC 编码，这就导致了整个中文的编码都变成了ANSIC，结果就造成了浏览器无法解析。然后就用Notepad+将整个html文件转换成UTF-8的编码格式，再运 行项目，中文乱码的问题就解决了。4.2图表在网页中不显

9、示冋题：网页正常打开，但是图表就是不显示。解决办法：使用另一个浏览器打开，图表正常显示。还有其他很多的小问题就不一一赘述了，例如：数据库写不进数据因为表名写错等等。5总结通过本次项目，从基本目标的定型到实践开发的过程，收获还是巨大的。 首 先感谢同学的耐心指导、解答在开发过程中遇到的困惑与问题， 并且在完成之后 还给我提供了一些合理的新功能的思路，使得程序一步一步得到了完善。其次是对一门新语言和新事物的认知和掌握。在没有任何实践经验的情况 下，通过本次项目，我花了较短的时间学习了Python。当然这和Python的语言特点也是脱不了关系的。除了一门新语言的简单掌握以及计算机网络编程的简 单实现，还锻炼了个人的学习以及动手能力。以及通过老师模板和网络的帮助， 达成了“提出问题-分析问题-解决问题”的解决途径。过去一直以为数据可视化需要复杂的算法或者对计算机底层原理有很高要 求的东西，通过本次数据可视化的项目，让我对数据可是化有了一个全新的认识。 门槛可高可低，深度可深可浅。比如除了我这样简单实现以外， 还可以去分析一 些庞大的数据。让我深深的体会到了，这门课在信息时代的重要性，比如：一些实时的地图什么的，对数据的可视化程度就非常的高。 所以重要性不言而喻，我 们应该在以后好好的加深理解和体会这门课。评分表项目设计评语项目设计指导教师成绩（签字）年月日