数据可视化结课作业

《数据可视化结课作业》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

2、可视化的主要目的是能够清晰地展示某一个地区每天用电量的变化，以便发电厂预测用电量，更好的调动发电机组。 项目中主要使用的技术包括：MySql、Flask和Echarts。Echarts是一个商业级的图表库，项目中直接引用了Echarts的JS文件。Flask是一个使用Python编写的轻量级Web应用框架，这个直接安装到Python环境里了。项目的大概思路就是首先运行创建数据库的Python代码，创建好数据库之后。再运行读取数据库的Python代码—readDatabase.py，这个程序会去找html网页，之后打开浏览器就能看到图表了。2项目结构2.1

3、数据库设计及实现2.1.1数据库表表1-1epower表属性名称数据类型可否为空备注TimeVarchar(20)否时间PowersVarchar(20)否用电量2.1.2设计及实现数据库就有两个字段，一个时间，一个用电量。数据库比较简单，都是最基本最基本的操作和实现。数据库插入数据是一个Python文件—create_data.py。首先配置好数据库连接的一些基本信息，然后在开始创建表。在创建表之前程序检查一下表是否存在，如果存在就将表删除，重新创建。其中创建表的代码为：cur.execute('CREATETABLEepower(timevarcha

4、r(20),powersvarchar(20))')数据是保存在一个数组里，实际上就是将数组中的数据插入到数据库中去。插入数据的代码为：....word格式cur.executemany('INSERTINTOepowerVALUES(%s,%s)',datas)最后关闭连接，释放资源。2.2FlaskFlask就是一个胶水层，将数据库和网页之间连接起来,这也是Python被称为“胶水语言”的一个体现。具体到项目，我们首先导入Flask类，然后我们使用 route() 装饰器告诉Flask什么样的URL能触发我们的函数。用Python生成HTML十分无趣

5、，而且相当繁琐，因为必须手动对HTML做转义来保证应用的安全。为此，Flask配备了Jinja2模板引擎。所以我使用render_template()方法来渲染模板。代码如下：@app.route("/",methods=["GET"])defindex():returnrender_template("index.html")Flask会在templates文件夹里寻找模板，也就是index.html。然后主页异步加载数据，Flask识别URL中的powers就执行查询数据库的代码，并将结果返回给主页面。其中的GET请求方法是指：浏览器告知服务器：只获

6、取页面上的信息并发给我。代码如下：@app.route("/powers",methods=["GET"])defpowers():ifrequest.method=="GET":conn=pymysql.connect(host='localhost',user='root',passwd='root',db='stu2',port=3306,charset='utf8')cur=conn.cursor()cur.execute('select*fromepower')res=cur.fetchall()cur.close()conn.close()r

7、eturnjsonify(time=[x[0]forxinres],powers=[x[1]forxinres],)....word格式2.3前端前端的东西主要是包括两个部分：一个是数据图表的生成，还有一个就是数据的异步加载。图表的生成就是两组数据，一个X轴一个Y轴。都在对应的数组里，Echarts负责将这些数组里面的数据以图表的方式体现出来。前端稍微复杂点的就是异步加载数据了，其实也比较简单，就是刚刚说的readDatabase.py文件里面会去读取数据然后给到前台页面，前台页面接收到数据。再将数据给到对应的数组里面，图表就生成出来了。异步加载代码如下

8、：$.get('/powers',function(data){myChart.