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

1、信息與電氣工程學(xué)院數(shù)據(jù)可視化報告（2016/2017 學(xué)年第二學(xué)期）專業(yè)班級： 計算機(jī)1403學(xué)生姓名： 葉何斌學(xué) 號： 140210316設(shè)計成績 ：word格式2017年06月1日目錄1項(xiàng)目摘要32項(xiàng)目結(jié)構(gòu)32.1 數(shù)據(jù)庫設(shè)計及實(shí)現(xiàn) .3.2.2 Flask442.3 前端53項(xiàng)目成果預(yù)覽54項(xiàng)目中所遇到的問題.7.4.1 網(wǎng)頁中文亂碼74.2 圖表在網(wǎng)頁中不顯示75總結(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ù)中包括了一天各個時段的用電量情況。本可視化的主要目的是能夠清晰地展示某一個地區(qū)每

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

3、稱數(shù)據(jù)類型可否為空備注TimeVarchar(20)否時間PowersVarchar(20)否用電量2.1.2 設(shè)計及實(shí)現(xiàn)數(shù)據(jù)庫就有兩個字段，一個時間，一個用電量。數(shù)據(jù)庫比較簡單，都是最 基本最基本的操作和實(shí)現(xiàn)。數(shù)據(jù)庫插入數(shù)據(jù)是一個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ù)是保存在一個數(shù)組

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

5、模板引擎。所以我使用 render_template() 方法來渲染模板。代碼如下：app.route("/", methods="GET")def index():return render_template("index.html")Flask會在templates 文件夾里尋找模板，也就是index.html。然后主頁異步加載數(shù)據(jù)，F(xiàn)lask識別URL中的powers就執(zhí)行查詢數(shù)據(jù)庫的 代碼，并將結(jié)果返回給主頁面。其中的GET請求方法是指：瀏覽器告知服務(wù) 器：只獲取頁面上的信息并發(fā)給我。代碼如下：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 前端前端的東西主要是包括兩個部分：一個是數(shù)據(jù)圖表的生成，還有一個就是數(shù)據(jù)的異步加載。圖表的生成就是兩組數(shù)據(jù)，一個X軸一個Y軸。都在 對應(yīng)的數(shù)組里，Echarts負(fù)責(zé)將這些數(shù)組里面的數(shù)據(jù)以圖表的方式體現(xiàn)出 來。前端稍微復(fù)雜點(diǎn)的就是異步加載數(shù)據(jù)了，其實(shí)也比較簡單，就是剛剛說的readDatabase.py文件里面會去讀取數(shù)據(jù)然后給到前臺頁面，前臺頁面 接收到數(shù)據(jù)。再將數(shù)據(jù)給到對應(yīng)的數(shù)組里面，圖表就生成出

8、來了。異步加 載代碼如下：$.get('/powers',function (data) myChart.hideLoading();myChart.setOption(xAxis: data: data.time,series: name:'用電量,/根據(jù)名字對應(yīng)到相應(yīng)的系列data: data.powers.map(parseFloat) ););3項(xiàng)目成果預(yù)覽圖3-1用電量分布折線圖圖3-2用電量分布柱狀圖4項(xiàng)目中所遇到的問題4.1 網(wǎng)頁中文亂碼問題：在項(xiàng)目運(yùn)行的時候，網(wǎng)頁出現(xiàn)了中文的亂碼。然后各種改網(wǎng)頁的編 碼格式，在html的頭部指定編碼為 GBK或GB231

9、2者B不行。原因及解決辦法：因?yàn)镹otepad+打開html網(wǎng)頁文件時使用的ANSIC編 碼，這就導(dǎo)致了整個中文的編碼都變成了ANSIC,結(jié)果就造成了瀏覽器無法解析。然后就用Notepad+將整個html文件轉(zhuǎn)換成UTF-8的編碼格式，再運(yùn)行 項(xiàng)目，中文亂碼的問題就解決了。4.2 圖表在網(wǎng)頁中不顯示問題：網(wǎng)頁正常打開，但是圖表就是不顯示。解決辦法：使用另一個瀏覽器打開，圖表正常顯示。還有其他很多的小問題就不一一贅述了，例如：數(shù)據(jù)庫寫不進(jìn)數(shù)據(jù)因?yàn)楸砻麑戝e等等。5總結(jié)通過本次項(xiàng)目，從基本目標(biāo)的定型到實(shí)踐開發(fā)的過程 ，收獲還是巨大的。 首先感謝同學(xué)的耐心指導(dǎo)、解答在開發(fā)過程中遇到的困惑與問題 ，并且

10、在完成 之后還給我提供了一些合理的新功能的思路 ，使得程序一步一步得到了完善。其次是對一門新語言和新事物的認(rèn)知和掌握。在沒有任何實(shí)踐經(jīng)驗(yàn)的情況 下，通過本次項(xiàng)目，我花了較短的時間學(xué)習(xí)了 Python。當(dāng)然這和Python的語 言特點(diǎn)也是脫不了關(guān)系的。除了一門新語言的簡單掌握以及計算機(jī)網(wǎng)絡(luò)編程的 簡單實(shí)現(xiàn)，還鍛煉了個人的學(xué)習(xí)以及動手能力。以及通過老師模板和網(wǎng)絡(luò)的幫助，達(dá)成了提出問題-分析問題-解決問題”的解決途徑。過去一直以為數(shù)據(jù)可視化需要復(fù)雜的算法或者對計算機(jī)底層原理有很高要 求的東西，通過本次數(shù)據(jù)可視化的項(xiàng)目，讓我對數(shù)據(jù)可是化有了一個全新的認(rèn) 識。門檻可高可低，深度可深可淺。比如除了我這樣簡單實(shí)現(xiàn)以外，還可以去 分析一些龐大的數(shù)據(jù)。讓我深深的體會到了 ，這門課在信息時代的重要性，比如：一些實(shí)時的地圖什么的，對數(shù)據(jù)的可視化程度就非常的高。所以重要性不 言而喻，