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

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

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

4、實際上就是將數組中的數據插入到數據庫中去。插入數據的代碼為：cur.executemany('INSERT INTO epower VALUES (%s,%s)', datas)最后關閉連接，釋放資源。2.2 FlaskFlask就是一個膠水層，將數據庫和網頁之間連接起來,這也是Python被稱為“膠水語言”的一個體現。具體到項目，我們首先導入Flask類，然后我們使用 route() 裝飾器告訴 Flask 什么樣的URL 能觸發我們的函數。用 Python 生成 HTML 十分無趣，而且相當繁瑣，因為必須手動對 HTML 做轉義來保證應用的安全。為此，F

5、lask 配備了 Jinja2 模板引擎。所以我使用 render_template() 方法來渲染模板。代碼如下：app.route("/", methods="GET")def index(): return render_template("index.html")Flask 會在 templates 文件夾里尋找模板，也就是index.html。然后主頁異步加載數據，Flask識別URL中的powers就執行查詢數據庫的代碼，并將結果返回給主頁面。其中的GET請求方法是指：瀏覽器告知服務器：只獲取頁面上的信息并發給我。代碼如下

6、：app.route("/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 epow

7、er') res=cur.fetchall() cur.close() conn.close() return jsonify(time = x0 for x in res, powers = x1 for x in res, )2.3 前端前端的東西主要是包括兩個部分：一個是數據圖表的生成，還有一個就是數據的異步加載。圖表的生成就是兩組數據，一個X軸一個Y軸。都在對應的數組里，Echarts負責將這些數組里面的數據以圖表的方式體現出來。前端稍微復雜點的就是異步加載數據了，其實也比較簡單，就是剛剛說的readDatabase.py文件里面會去讀取數據然后給到前臺頁面，前臺頁面接收到數據

8、。再將數據給到對應的數組里面，圖表就生成出來了。異步加載代碼如下： $.get('/powers',function (data) myChart.hideLoading(); myChart.setOption( xAxis: data: data.time , series: name: '用電量', / 根據名字對應到相應的系列 data: data.powers.map(parseFloat) ); );3 項目成果預覽圖 3-1 用電量分布折線圖圖 3-2 用電量分布柱狀圖4 項目中所遇到的問題4.1 網頁中文亂碼問題：在項目運行的時候，網頁出現了中文

9、的亂碼。然后各種改網頁的編碼格式，在html的頭部指定編碼為GBK或GB2312都不行。原因及解決辦法：因為Notepad+打開html網頁文件時使用的ANSIC編碼，這就導致了整個中文的編碼都變成了ANSIC，結果就造成了瀏覽器無法解析。然后就用Notepad+將整個html文件轉換成UTF-8的編碼格式，再運行項目，中文亂碼的問題就解決了。4.2 圖表在網頁中不顯示問題：網頁正常打開，但是圖表就是不顯示。解決辦法：使用另一個瀏覽器打開，圖表正常顯示。還有其他很多的小問題就不一一贅述了，例如：數據庫寫不進數據因為表名寫錯等等。5 總結通過本次項目，從基本目標的定型到實踐開發的過程，收獲還是巨

10、大的。 首先感謝同學的耐心指導、解答在開發過程中遇到的困惑與問題，并且在完成之后還給我提供了一些合理的新功能的思路，使得程序一步一步得到了完善。其次是對一門新語言和新事物的認知和掌握。在沒有任何實踐經驗的情況下，通過本次項目，我花了較短的時間學習了Python。當然這和Python的語言特點也是脫不了關系的。除了一門新語言的簡單掌握以及計算機網絡編程的簡單實現，還鍛煉了個人的學習以及動手能力。以及通過老師模板和網絡的幫助，達成了“提出問題-分析問題-解決問題”的解決途徑。 過去一直以為數據可視化需要復雜的算法或者對計算機底層原理有很高要求的東西，通過本次數據可視化的項目，讓我對數據可是化有了一個全新的認識