數(shù)據(jù)可視化結(jié)課作業(yè)

1、信息與電氣工程學(xué)院數(shù)據(jù)可視化報(bào)告（2016/2017學(xué)年第二學(xué)期）專業(yè)班級(jí) ： 計(jì)算機(jī) 1403 學(xué)生姓名 ： 葉何斌 學(xué) 號(hào)： 140210316 設(shè)計(jì)成績 ： 2017年06月1日目錄1 項(xiàng)目摘要32 項(xiàng)目結(jié)構(gòu)32.1 數(shù)據(jù)庫設(shè)計(jì)及實(shí)現(xiàn)32.2 Flask42.3 前端43 項(xiàng)目成果預(yù)覽54 項(xiàng)目中所遇到的問題64.1 網(wǎng)頁中文亂碼64.2 圖表在網(wǎng)頁中不顯示65 總結(jié)71 項(xiàng)目摘要本項(xiàng)目選取的數(shù)據(jù)集為一天的用電量分布，數(shù)據(jù)集是基于實(shí)際數(shù)據(jù)虛構(gòu)的，因?yàn)閿?shù)據(jù)量太龐大。雖然數(shù)據(jù)是虛構(gòu)的但是也具有一定的代表性。數(shù)據(jù)中包括了一天各個(gè)時(shí)段的用電量情況。本可視化的主要目的是能夠清晰地展示某一個(gè)地區(qū)每天

2、用電量的變化，以便發(fā)電廠預(yù)測用電量，更好的調(diào)動(dòng)發(fā)電機(jī)組。項(xiàng)目中主要使用的技術(shù)包括：MySql、Flask和Echarts。Echarts是一個(gè)商業(yè)級(jí)的圖表庫，項(xiàng)目中直接引用了Echarts的JS文件。Flask是一個(gè)使用 Python 編寫的輕量級(jí) Web 應(yīng)用框架，這個(gè)直接安裝到Python環(huán)境里了。項(xiàng)目的大概思路就是首先運(yùn)行創(chuàng)建數(shù)據(jù)庫的Python代碼，創(chuàng)建好數(shù)據(jù)庫之后。再運(yùn)行讀取數(shù)據(jù)庫的Python代碼readDatabase.py，這個(gè)程序會(huì)去找html網(wǎng)頁，之后打開瀏覽器就能看到圖表了。2 項(xiàng)目結(jié)構(gòu)2.1 數(shù)據(jù)庫設(shè)計(jì)及實(shí)現(xiàn)2.1.1 數(shù)據(jù)庫表表 1-1 epower表屬性名稱數(shù)據(jù)類型

3、可否為空備注TimeVarchar(20)否時(shí)間PowersVarchar(20)否用電量2.1.2 設(shè)計(jì)及實(shí)現(xiàn)數(shù)據(jù)庫就有兩個(gè)字段，一個(gè)時(shí)間，一個(gè)用電量。數(shù)據(jù)庫比較簡單，都是最基本最基本的操作和實(shí)現(xiàn)。數(shù)據(jù)庫插入數(shù)據(jù)是一個(gè)Python文件create_data.py。首先配置好數(shù)據(jù)庫連接的一些基本信息，然后在開始創(chuàng)建表。在創(chuàng)建表之前程序檢查一下表是否存在，如果存在就將表刪除，重新創(chuàng)建。其中創(chuàng)建表的代碼為：cur.execute(CREATE TABLE epower (time varchar(20),powers varchar(20)數(shù)據(jù)是保存在一個(gè)數(shù)組里，實(shí)際上就是將數(shù)組中的數(shù)據(jù)插入到數(shù)據(jù)

4、庫中去。插入數(shù)據(jù)的代碼為：cur.executemany(INSERT INTO epower VALUES (%s,%s), datas)最后關(guān)閉連接，釋放資源。2.2 FlaskFlask就是一個(gè)膠水層，將數(shù)據(jù)庫和網(wǎng)頁之間連接起來,這也是Python被稱為“膠水語言”的一個(gè)體現(xiàn)。具體到項(xiàng)目，我們首先導(dǎo)入Flask類，然后我們使用route()裝飾器告訴 Flask 什么樣的URL 能觸發(fā)我們的函數(shù)。用 Python 生成 HTML 十分無趣，而且相當(dāng)繁瑣，因?yàn)楸仨毷謩?dòng)對(duì) HTML 做轉(zhuǎn)義來保證應(yīng)用的安全。為此，F(xiàn)lask 配備了 Jinja2 模板引擎。所以我使用 render_templ

5、ate() 方法來渲染模板。代碼如下：app.route(/, methods=GET)def index(): return render_template(index.html)Flask 會(huì)在 templates 文件夾里尋找模板，也就是index.html。然后主頁異步加載數(shù)據(jù)，F(xiàn)lask識(shí)別URL中的powers就執(zhí)行查詢數(shù)據(jù)庫的代碼，并將結(jié)果返回給主頁面。其中的GET請(qǐng)求方法是指：瀏覽器告知服務(wù)器：只獲取頁面上的信息并發(fā)給我。代碼如下：app.route(/powers, methods=GET)def powers(): if request.method = GET: conn

6、=pymysql.connect(host=localhost,user=root,passwd=root,db=stu2,port=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 前端前端的東西主要是包括兩個(gè)部分：一個(gè)是數(shù)據(jù)圖表的生成，還有一個(gè)就是數(shù)據(jù)的異步加載。圖表的生成就

7、是兩組數(shù)據(jù)，一個(gè)X軸一個(gè)Y軸。都在對(duì)應(yīng)的數(shù)組里，Echarts負(fù)責(zé)將這些數(shù)組里面的數(shù)據(jù)以圖表的方式體現(xiàn)出來。前端稍微復(fù)雜點(diǎn)的就是異步加載數(shù)據(jù)了，其實(shí)也比較簡單，就是剛剛說的readDatabase.py文件里面會(huì)去讀取數(shù)據(jù)然后給到前臺(tái)頁面，前臺(tái)頁面接收到數(shù)據(jù)。再將數(shù)據(jù)給到對(duì)應(yīng)的數(shù)組里面，圖表就生成出來了。異步加載代碼如下： $.get(/powers,function (data) myChart.hideLoading(); myChart.setOption( xAxis: data: data.time , series: name: 用電量, / 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列 data:

8、(parseFloat) ); );3 項(xiàng)目成果預(yù)覽圖 3-1 用電量分布折線圖圖 3-2 用電量分布柱狀圖4 項(xiàng)目中所遇到的問題4.1 網(wǎng)頁中文亂碼問題：在項(xiàng)目運(yùn)行的時(shí)候，網(wǎng)頁出現(xiàn)了中文的亂碼。然后各種改網(wǎng)頁的編碼格式，在html的頭部指定編碼為GBK或GB2312都不行。原因及解決辦法：因?yàn)镹otepad+打開html網(wǎng)頁文件時(shí)使用的ANSIC編碼，這就導(dǎo)致了整個(gè)中文的編碼都變成了ANSIC，結(jié)果就造成了瀏覽器無法解析。然后就用Notepad+將整個(gè)html文件轉(zhuǎn)換成UTF-8的編碼格式，再運(yùn)行項(xiàng)目，中文亂碼的問題就解決了。4.2 圖表在網(wǎng)頁中不顯示問題：網(wǎng)頁正常打開，但是圖表就是不顯示。

9、解決辦法：使用另一個(gè)瀏覽器打開，圖表正常顯示。還有其他很多的小問題就不一一贅述了，例如：數(shù)據(jù)庫寫不進(jìn)數(shù)據(jù)因?yàn)楸砻麑戝e(cuò)等等。5 總結(jié)通過本次項(xiàng)目，從基本目標(biāo)的定型到實(shí)踐開發(fā)的過程，收獲還是巨大的。 首先感謝同學(xué)的耐心指導(dǎo)、解答在開發(fā)過程中遇到的困惑與問題，并且在完成之后還給我提供了一些合理的新功能的思路，使得程序一步一步得到了完善。其次是對(duì)一門新語言和新事物的認(rèn)知和掌握。在沒有任何實(shí)踐經(jīng)驗(yàn)的情況下，通過本次項(xiàng)目，我花了較短的時(shí)間學(xué)習(xí)了Python。當(dāng)然這和Python的語言特點(diǎn)也是脫不了關(guān)系的。除了一門新語言的簡單掌握以及計(jì)算機(jī)網(wǎng)絡(luò)編程的簡單實(shí)現(xiàn)，還鍛煉了個(gè)人的學(xué)習(xí)以及動(dòng)手能力。以及通過老師模板和網(wǎng)絡(luò)的幫助，達(dá)成了“提出問題-分析問題-解決問題”的解決途徑。 過去一直以為數(shù)據(jù)可視化需要復(fù)雜的算法或者對(duì)計(jì)算機(jī)底層原理有很高要求的東西，通過本次數(shù)據(jù)可視化的項(xiàng)目，讓我對(duì)數(shù)據(jù)可是化有了一個(gè)全新的認(rèn)識(shí)。門檻可高可低，深度