數(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ì)成績(jī):目錄1項(xiàng)目摘要 22項(xiàng)目結(jié)構(gòu) 22.1 數(shù)據(jù)庫(kù)設(shè)計(jì)及實(shí)現(xiàn) 22.2 Flask 32.3 前端 33項(xiàng)目成果預(yù)覽 44項(xiàng)目中所遇到的問(wèn)題 54.1 網(wǎng)頁(yè)中文亂碼 54.2 圖表在網(wǎng)頁(yè)中不顯示 55總結(jié) 51項(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ū) 每天用電量的變化，以便發(fā)電廠預(yù)測(cè)用

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

3、ar(20)否時(shí)間PowersVarchar(20)否用電量2.1.2設(shè)計(jì)及實(shí)現(xiàn)數(shù)據(jù)庫(kù)就有兩個(gè)字段，一個(gè)時(shí)間，一個(gè)用電量。數(shù)據(jù)庫(kù)比較簡(jiǎn)單，都是最基 本最基本的操作和實(shí)現(xiàn)。數(shù)據(jù)庫(kù)插入數(shù)據(jù)是一個(gè)Python文件一create_data.py 首先配置好數(shù)據(jù)庫(kù)連接的一些基本信息，然后在開(kāi)始創(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ù)庫(kù)中

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

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

6、quot;GET")def powers():ifrequest.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.fetchall()cur.close()conn.clo

7、se()returnjsonify(time = x0 for x in res,powers = x1 for x in res,)2.3 前端前端的東西主要是包括兩個(gè)部分：一個(gè)是數(shù)據(jù)圖表的生成，還有一個(gè)就是數(shù)據(jù)的異步加載。圖表的生成就是兩組數(shù)據(jù)，一個(gè) X軸一個(gè)Y軸。都在對(duì) 應(yīng)的數(shù)組里，Echarts負(fù)責(zé)將這些數(shù)組里面的數(shù)據(jù)以圖表的方式體現(xiàn)出來(lái)。 前端稍微復(fù)雜點(diǎn)的就是異步加載數(shù)據(jù)了，其實(shí)也比較簡(jiǎn)單，就是剛剛說(shuō)的 readDatabase.py文件里面會(huì)去讀取數(shù)據(jù)然后給到前臺(tái)頁(yè)面，前臺(tái)頁(yè)面接收 到數(shù)據(jù)。再將數(shù)據(jù)給到對(duì)應(yīng)的數(shù)組里面，圖表就生成出來(lái)了。異步加載代碼 如下：$.get('/p

8、owers',function (data) myChart.hideLoading();myChart.setOption(xAxis: data: data.time,series: name:用電量',/根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列data: data.powers.map(parseFloat) ););3項(xiàng)目成果預(yù)覽圖3-1用電量分布折線圖汨市一律電分布呂士 M圖3-2用電量分布柱狀圖4項(xiàng)目中所遇到的問(wèn)題4.1 網(wǎng)頁(yè)中文亂碼問(wèn)題：在項(xiàng)目運(yùn)行的時(shí)候，網(wǎng)頁(yè)出現(xiàn)了中文的亂碼。然后各種改網(wǎng)頁(yè)的編碼 格式，在html的頭部指定編碼為 GB3 GB2312tB不行。原因及解決辦法：因

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