数据可视化结课作业

1、信息与电气工程学院数据可视化报告（2016/2017 学年第二学期）专业班级： 计算机1403学生姓名： 叶何斌学 号： 140210316设计成绩 ：word格式2017年06月1日目录1项目摘要32项目结构32.1 数据库设计及实现 .3.2.2 Flask442.3 前端53项目成果预览54项目中所遇到的问题.7.4.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 表属性名

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做转义来保证 应用的安全。为此，Flask配备了 Jinja2

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

6、/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 epower')res=cur.fetc

7、hall()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 网页中文乱码问题：在项目运行的时候，网页出现了中文的乱码。然后各种改网页的编 码格式，在html的头部指定编码为 GBK或GB231

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

10、在完成 之后还给我提供了一些合理的新功能的思路 ，使得程序一步一步得到了完善。其次是对一门新语言和新事物的认知和掌握。在没有任何实践经验的情况 下，通过本次项目，我花了较短的时间学习了 Python。当然这和Python的语 言特点也是脱不了关系的。除了一门新语言的简单掌握以及计算机网络编程的 简单实现，还锻炼了个人的学习以及动手能力。以及通过老师模板和网络的帮助，达成了提出问题-分析问题-解决问题”的解决途径。过去一直以为数据可视化需要复杂的算法或者对计算机底层原理有很高要 求的东西，通过本次数据可视化的项目，让我对数据可是化有了一个全新的认 识。门槛可高可低，深度可深可浅。比如除了我这样简单实现以外，还可以去 分析一些庞大的数据。让我深深的体会到了 ，这门课在信息时代的重要性，比如：一些实时的地图什么的，对数据的可视化程度就非常的高。所以重要性不 言而喻，