数据可视化结课作业

信息与电气工程学院数据可视化报告（ 2016/2017学年第二学期）专业班级：计算机1403学生姓名：叶何斌学号：140210316设计成绩：2017 年 06 月 1 日精品资料目录1项目摘要 .32项目结构 .32.1数据库设计及实现.32.2 flask .42.3前端.53项目成果预览 .54项目中所遇到的问题 .74.1网页中文乱码 .74.2图表在网页中不显示 .75总结.71 项目摘要本项目选取的数据集为一天的用电量分布，数据集是基于实际数据虚构的， 因为数据量太庞大。 虽然数据是虚构的但是也具有一定的代表性。数据中包括了一天各个时段的用电量情况。 本可视化的主要目的是能够清晰地展示某一个地区每天用电量的变化，以便发电厂预测用电量，更好的调动发电机组。项目中主要使用的技术包括：mysql 、flask 和 echarts 。echarts 是一个商业级的图表库，项目中直接引用了echarts 的 js 文件。flask 是一个使用python 编写的轻量级web应用框架，这个直接安装到python 环境里了。项目的大概思路就是首先运行创建数据库的python 代码，创建好数据库之后。再运行读取数据库的 python 代码 readdatabase.py ，这个程序会去找html 网页，之后打开浏览器就能看到图表了。2 项目结构2.1 数据库设计及实现2.1.1数据库表表1-1 epower表属性名称数据类型可否为空备注timepowersvarchar(20)varchar(20)否否时间用电量2.1.2设计及实现数据库就有两个字段，一个时间，一个用电量。数据库比较简单，都是最基本最基本的操作和实现。数据库插入数据是一个python 文件 create_data.py 。首先配置好数据库连接的一些基本信息，然后在开始创建表。 在创建表之前程序检查一下表是否存在，如果存在就将表删除，重新创建。其中创建表的代码为：cur.execute(createtableepower(timevarchar(20),powersvarchar(20)数据是保存在一个数组里，实际上就是将数组中的数据插入到数据库中去。插入数据的代码为：cur.executemany(insert into epower values (%s,%s), datas)最后关闭连接，释放资源。2.2 flaskflask 就是一个胶水层，将数据库和网页之间连接起来,这也是 python 被称为“胶水语言”的一个体现。具体到项目，我们首先导入flask类，然后我们使用route()装饰器告诉flask什么样的 url能触发我们的函数。用python 生成 html十分无趣，而且相当繁琐，因为必须手动对html做转义来保证应 用 的 安 全 。 为 此 ， flask配 备 了jinja2模 板 引 擎 。 所 以 我 使 用render_template()方法来渲染模板。代码如下：app.route(/, methods=get) def index():return render_template(index.html)flask会在 templates文件夹里寻找模板，也就是index.html 。然后主页异步加载数据， flask 识别 url 中的 powers 就执行查询数据库的代码，并将结果返回给主页面。 其中的 get 请求方法是指： 浏览器告知服务器： 只获取页面上的信息并发给我。代码如下：app.route(/powers, methods=get) def powers():if request.method = get:conn=pymysql.connect(host=localhost,user=root,passwd=root,db=stu2,por t=3306,charset=utf8)cur=conn.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 前端前端的东西主要是包括两个部分：一个是数据图表的生成，还有一个就 是数据的异步加载。 图表的生成就是两组数据， 一个 x 轴一个 y 轴。都在对应的数组里， echarts负责将这些数组里面的数据以图表的方式体现出来。 前端稍微复杂点的就是异步加载数据了，其实也比较简单，就是刚刚说的readdatabase.py文件里面会去读取数据然后给到前台页面，前台页面接收 到数据。再将数据给到对应的数组里面，图表就生成出来了。异步加载代码如下：$.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 网页中文乱码问题：在项目运行的时候， 网页出现了中文的乱码。 然后各种改网页的编码格式，在 html 的头部指定编码为gbk 或 gb2312 都不行。原因及解决办法：因为notepad+ 打开 html 网页文件时使用的ansic编码，这就导致了整个中文的编码都变成了ansic ，结果就造成了浏览器无法解析。然后就用 notepad+ 将整个 html 文件转换成 utf-8 的编码格式， 再运行项目，中文乱码的问题就解决了。4.2 图表在网页中不显示问题：网页正常打开，但是图表就是不显示。解决办法：使用另一个浏览器打开，图表正常显示。还有其他很多的小问题就不一一赘述了，例如：数据库写不进数据因为表名写错等等。5 总结通过本次项目，从基本目标的定型到实践开发的过程，收获还是巨大的。首先感谢同学的耐心指导、 解答在开发过程中遇到的困惑与问题，并且在完成之后还给我提供了一些合理的新功能的思路，使得程序一步一步得到了完善。其次是对一门新语言和新事物的认知和掌握。在没有任何实践经验的情况下，通过本次项目，我花了较短的时间学习了python 。当然这和 python 的语言特点也是脱不了关系的。 除了一门新语言的简单掌握以及计算机网络编程的简单实现，还锻炼了个人的学习以及动手能力。以及通过老师模板和网络的帮助，达成了“提出问题-分析问题 -解决问题”的解决途径。过去一直以为数据可视化需要复杂的算法或者对计算机底层原理有很高要求的东西，通过本次数据可视化的项目， 让我对数据可是化有了一个全新的认识。门槛可高可低， 深度可深可浅。 比如除了我这样简单实现以外，还可以去分析