数据可视化结课作业Word文档下载推荐.docx
《数据可视化结课作业Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《数据可视化结课作业Word文档下载推荐.docx（5页珍藏版）》请在冰豆网上搜索。
2.3前端
项目成果预览
项目中所遇到的问题........
4.1网页中文乱码
4.2图表在网页中不显示
总结
.3
.4.
7.
.7.
1项目摘要
本项目选取的数据集为一天的用电量分布，数据集是基于实际数据虚构
的，因为数据量太庞大。
虽然数据是虚构的但是也具有一定的代表性。
数据中
包括了一天各个时段的用电量情况。
本可视化的主要目的是能够清晰地展示某一个地区每天用电量的变化，以便发电厂预测用电量，更好的调动发电机组。
项目中主要使用的技术包括：
MySql、Flask和Echarts。
Echarts是一个商业级的图表库，项目中直接引用了Echarts的JS文件。
Flask是一个使用Python编写的轻量级Web应用框架，这个直接安装到Python环境里了。
项目的大概思路就是首先运行创建数据库的Python代码，创建好数据库之后。
再
运行读取数据库的Python代码一readDatabase.py，这个程序会去找html网页，之后打开浏览器就能看到图表了。
2项目结构
2.1.1数据库表
表1-1epower表
属性名称
数据类型
可否为空
备注
Time
Varchar（20）
否
时间
Powers
用电量
2.1.2设计及实现
数据库就有两个字段，一个时间，一个用电量。
数据库比较简单，都是最基本最基本的操作和实现。
数据库插入数据是一个Python文件一create_data.py。
首先配置好数据库连接的一些基本信息，然后在开始创建表。
在创建表之前程序检查一下表是否存在，如果存在就将表删除，重新创建。
其
中创建表的代码为：
cur.execute（'
CREATETABLEepower（timevarchar（20）,powersvarchar（20））'
）
数据是保存在一个数组里，实际上就是将数组中的数据插入到数据库中
去。
插入数据的代码为：
cur.executemany（'
INSERTINTOepowerVALUES（%s,%s）'
datas）
最后关闭连接，释放资源。
2.2Flask
Flask就是一个胶水层，将数据库和网页之间连接起来，这也是Python被称为胶水语言”的一个体现。
具体到项目，我们首先导入Flask类，然后我们使用route（）装饰器告诉Flask什么样的URL能触发我们的函数。
用Python生成HTML十分无趣，而且相当繁琐，因为必须手动对HTML做转义来保证应用的安全。
为此，Flask配备了Jinja2模板引擎。
所以我使用render_template（）方法来渲染模板。
代码如下：
@app.route（"
/"
methods=["
GET"
]）
defindex（）:
returnrender_template（"
index.html"
Flask会在templates文件夹里寻找模板，也就是index.html。
然后主页异步加载数据，Flask识别URL中的powers就执行查询数据库的代码，并将结果返回给主页面。
其中的GET请求方法是指：
浏览器告知服务器：
只获取页面上的信息并发给我。
/powers"
defpowers（）:
ifrequest.method=="
:
conn=pymysql.connect（host='
localhost'
user='
root'
passwd='
db='
stu2'
port=3306,charset='
utf8'
cur=conn.cursor（）
select*fromepower'
res=cur.fetchall（）
cur.close（）
conn.close（）
returntime=[x[0]forxinres],powers=[x[1]forxinres],）
2.3前端
前端的东西主要是包括两个部分：
一个是数据图表的生成，还有一个
就是数据的异步加载。
图表的生成就是两组数据，一个X轴一个丫轴。
都在对应的数组里，Echarts负责将这些数组里面的数据以图表的方式体现出来。
前端稍微复杂点的就是异步加载数据了，其实也比较简单，就是刚刚
说的readDatabase.py文件里面会去读取数据然后给到前台页面，前台页面接收到数据。
再将数据给到对应的数组里面，图表就生成出来了。
异步加载代码如下：
$.get（'
/powers'
function（data）{
myChart.hideLoading（）;
myChart.setOption（{
xAxis:
{
data:
data.time
}，
series:
[{
name:
'
用电量'
//根据名字对应到相应的系列
data.powers.map（parseFloat）}]
}）；
3项目成果预览
图3-1用电量分布折线图
图3-2用电量分布柱状图
CU
4项目中所遇到的问题
4.1网页中文乱码
问题：
在项目运行的时候，网页出现了中文的乱码。
然后各种改网页的编码格式，在html的头部指定编码为GBK或GB2312都不行。
原因及解决办法：
因为Notepad++打开html网页文件时使用的ANSIC编码，这就导致了整个中文的编码都变成了ANSIC，结果就造成了浏览器无法解
析。
然后就用Notepad++将整个html文件转换成UTF-8的编码格式，再运行项目，中文乱码的问题就解决了。
冋题：
网页正常打开，但是图表就是不显示。
解决办法：
使用另一个浏览器打开，图表正常显示。
还有其他很多的小问题就不一一赘述了，例如：
数据库写不进数据因为表名写
错等等。
5总结
通过本次项目，从基本目标的定型到实践开发的过程，收获还是巨大的。
首先感谢同学的耐心指导、解答在开发过程中遇到的困惑与问题，并且在完成之后还给我提供了一些合理的新功能的思路，使得程序一步一步得到了完善。
其次是对一门新语言和新事物的认知和掌握。
在没有任何实践经验的情况下，通过本次项目，我花了较短的时间学习了Python。
当然这和Python的语言特点也是脱不了关系的。
除了一门新语言的简单掌握以及计算机网络编程的简单实现，还锻炼了个人的学习以及动手能力。
以及通过老师模板和网络的帮
助，达成了提出问题-分析问题-解决问题”的解决途径。
过去一直以为数据可视化需要复杂的算法或者对计算机底层原理有很高要求的东西，通过本次数据可视化的项目，让我对数据可是化有了一个全新的认识。
门槛可高可低，深度可深可浅。
比如除了我这样简单实现以外，还可以去分析一些庞大的数据。
让我深深的体会到了，这门课在信息时代的重要性，比
所以重要性不
如：
一些实时的地图什么的，对数据的可视化程度就非常的高言而喻，我们应该在以后好好的加深理解和体会这门课。
评分表
项目设计
评语
指导教师
成绩
（签字）
年月
日
升级会员 