《數(shù)據(jù)庫(kù)與信息系統(tǒng)》數(shù)據(jù)展示與分析

1、數(shù)據(jù)可視化分析8目 錄數(shù)據(jù)圖表概述8.1“e學(xué)習(xí)”網(wǎng)站的圖表分析8.28.1 數(shù)據(jù)圖表概述ECharts數(shù)據(jù)圖表基礎(chǔ)認(rèn)識(shí)數(shù)據(jù)報(bào)表和數(shù)據(jù)圖表數(shù)據(jù)報(bào)表和數(shù)據(jù)圖表是將信息匯總輸出或打印的一種表現(xiàn)形式。 數(shù)據(jù)圖表不僅可以集中、分類顯示數(shù)據(jù)， 還可以幫助用戶進(jìn)一步分析信息。 常見(jiàn)的表現(xiàn)形式為：報(bào)表、折線圖、柱狀圖、散點(diǎn)圖、K線圖、餅圖、雷達(dá)圖、和弦圖等。繪圖工具：Excel、ECharts（百度提供）等。百度EChartsECharts（Enterprise Charts)商業(yè)級(jí)數(shù)據(jù)圖表，是百度公司采用JavaScript語(yǔ)言實(shí)現(xiàn)的一個(gè)開(kāi)源可視化庫(kù)，支持個(gè)性化定制數(shù)據(jù)圖表。/Javascript什么是

2、Javascript ？JavaScript是一種用于Web應(yīng)用開(kāi)發(fā)的腳本語(yǔ)言，通過(guò)嵌入在HTML中來(lái)實(shí)現(xiàn)自身功能，常用來(lái)為網(wǎng)頁(yè)添加動(dòng)態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。JavaScript在線實(shí)例：/try/try.php?filename=tryjs_eventsHTML 定義了網(wǎng)頁(yè)的內(nèi)容。CSS 描述了網(wǎng)頁(yè)的布局和樣式。JavaScript 網(wǎng)頁(yè)的行為。它們是JavaScript web 開(kāi)發(fā)人員必須學(xué)習(xí)的 3 門(mén)語(yǔ)言JavaScript與HTML、CSS的關(guān)系：Javascript【例8.1】在HTML中嵌入JavaScript腳本，實(shí)現(xiàn)動(dòng)態(tài)交互123嵌入方式嵌入JavaScrip

3、t腳本。把JavaScript腳本保存到外部文件。嵌入自定義函數(shù)。JSON數(shù)據(jù)格式在JavaScript中定義JSON類型變量：JSON全稱是JavaScriptObjectNotation(JavaScript 對(duì)象表示法)。JSON 是存儲(chǔ)和交換文本信息的語(yǔ)法，獨(dú)立于編程語(yǔ)言和平臺(tái)。在ECharts中，數(shù)據(jù)圖表的屬性設(shè)置采用JSON格式，一些數(shù)據(jù)內(nèi)容也可采用JSON格式。數(shù)據(jù)通常表示成鍵值對(duì)。THANK YOU!實(shí)現(xiàn)靜態(tài)數(shù)據(jù)圖表【例8.2】用柱狀圖顯示各課程平均成績(jī)，點(diǎn)擊某項(xiàng)顯示平均分提示。ECharts數(shù)據(jù)圖表實(shí)現(xiàn)方法課程平均成績(jī)柱狀圖 操作步驟 新建網(wǎng)站W(wǎng)82_Bar，添加Echart

4、s資源包。添加Echarts資源包的方式：將下載的ECharts包解壓，復(fù)制“builddist”目錄及其下所有內(nèi)容在解決方案資源管理器中右擊本網(wǎng)站項(xiàng)目選“粘帖”，后修改dist文件夾名稱為echarts。 添加Web窗體，命名為Bar.aspx文件。設(shè)計(jì)頁(yè)面。在設(shè)計(jì)窗口通過(guò)工具箱的HTML組拖放一個(gè)Div區(qū)域塊控件并調(diào)整到合適大小，設(shè)置屬性ID值為“main”或直接在body部分用采用下面語(yǔ)句定義一個(gè)定高寬的區(qū)域塊，將在此繪制ECharts數(shù)據(jù)圖表 在body部分用標(biāo)簽引入echarts-all.js 外部文件，然后標(biāo)識(shí)新腳本塊開(kāi)始 初始化圖表var myChart = echarts.in

5、it(document.getElementById(main); 設(shè)置option配置項(xiàng)設(shè)置圖表的屬性，包括圖表元素屬性和數(shù)據(jù)內(nèi)容屬性。 為ECharts對(duì)象加載數(shù)據(jù)，并說(shuō)明腳本塊結(jié)束 myChart.setOption(option); 代碼 JavaScript腳本塊 在數(shù)據(jù)圖表上可以添加工具箱，工具箱內(nèi)置的工具有：數(shù)據(jù)區(qū)域縮放、數(shù)據(jù)視圖、重置、動(dòng)態(tài)類型切換、導(dǎo)出圖片，方便用戶以不同形態(tài)查看圖表或?qū)С龊捅４鎴D表。圖表的瀏覽和導(dǎo)出【例8.3】例8.2繪制的圖表增加工具箱，并使用“導(dǎo)出圖片”工具保存圖表。操作步驟復(fù)制例8.2的網(wǎng)站命名為W83_BarSave，在設(shè)置option配置項(xiàng)時(shí)添加如

6、下toolbox圖表元素說(shuō)明。toolbox: show: true, feature: mark: show: true , /輔助線標(biāo)志 dataZoom: show: true , /數(shù)據(jù)框選區(qū)域縮放 dataView: show: true, readOnly: false , /數(shù)據(jù)視圖 restore: show: true , /恢復(fù)初始圖表 magicType: /動(dòng)態(tài)類型切換 show: true, type: bar, line /柱狀圖和折線圖 , saveAsImage: show: true /保存圖片 點(diǎn)擊“ ”工具菜單可切換為折線圖；點(diǎn)擊“ ”可切換為柱狀圖；點(diǎn)擊

7、“ ”查看數(shù)據(jù)視圖；點(diǎn)擊“ ”可對(duì)選中區(qū)域進(jìn)行縮放。點(diǎn)擊“ ”可展示圖片，再點(diǎn)擊可下載保存圖片文件，圖片格式為.png。THANK YOU!8.2 圖表分析實(shí)例展示數(shù)據(jù)庫(kù)數(shù)據(jù)使用圖表展示數(shù)據(jù)，需要展示從數(shù)據(jù)庫(kù)中動(dòng)態(tài)獲取的數(shù)據(jù)。可以利用后臺(tái)程序訪問(wèn)數(shù)據(jù)庫(kù)獲取數(shù)據(jù)并轉(zhuǎn)換為圖表需要的數(shù)據(jù)格式，傳遞給HTML頁(yè)面由ECharts展示。展示數(shù)據(jù)庫(kù)數(shù)據(jù)【例8.4】從e_learning數(shù)據(jù)庫(kù)獲取課程平均成績(jī)繪制柱狀圖。課程平均成績(jī)柱狀圖課程平均成績(jī)數(shù)據(jù)視圖后臺(tái)數(shù)據(jù)準(zhǔn)備前臺(tái)頁(yè)面顯示后臺(tái)數(shù)據(jù)準(zhǔn)備新建空網(wǎng)站W(wǎng)84_BarDB,添加頁(yè)面BarDb.aspx添加MySQL引用訪問(wèn)數(shù)據(jù)庫(kù)獲取數(shù)據(jù)在BarDB.aspx

8、.cs代碼文件的Page_Load事件中訪問(wèn)數(shù)據(jù)庫(kù)e_learning，并將獲得的數(shù)據(jù)轉(zhuǎn)換為繪制柱狀圖所需要的格式。將從數(shù)據(jù)庫(kù)獲取的字段值轉(zhuǎn)換成以下字符串CourseData和ScoreData，就構(gòu)造出以字符串描述的數(shù)值。CourseData=“課號(hào)1, 課號(hào)2 “ScoreData=“分1, 分2.” 本例需要的數(shù)據(jù)是兩個(gè)數(shù)組：課程號(hào)數(shù)組“課號(hào)1”, “課號(hào)2” 平均分?jǐn)?shù)組分1，分2. 。后臺(tái)數(shù)據(jù)讀取代碼代碼定義字符串類型公共變量，注意public前臺(tái)頁(yè)面繪圖 在網(wǎng)站中添加Echarts資源包 頁(yè)面設(shè)計(jì)從工具箱的“HTML”組中拖動(dòng)一個(gè)Input(button)控件放置到頁(yè)面的左上角，設(shè)置

9、屬性Value值為“繪制圖表”；下邊放置一個(gè)Div控件并調(diào)到合適的大小，設(shè)置屬性ID值為main。 定義JavaScript函數(shù)繪圖 設(shè)置“繪制圖片”按鈕對(duì)應(yīng)的單擊事件雙擊“繪制圖表”按鈕，在“源代碼”視圖中，可看到Button1的事件過(guò)程：將OnClick事件過(guò)程替換為myFunction函數(shù)調(diào)用，即：OnClick=myFunction(,) 其中，、獲得后臺(tái)公共變量CourseData和ScoreData傳遞的數(shù)據(jù)值。前臺(tái)Echarts代碼（JavaScript函數(shù)繪圖）講繪圖功能定義成函數(shù)，以便按鈕單擊時(shí)調(diào)用X軸標(biāo)簽由傳入?yún)?shù)d1指定可視化數(shù)據(jù)分析 餅圖又稱扇形圖，描述總體的樣本值構(gòu)成

10、比。它以一個(gè)圓的面積表示總體，以各扇形面積表示一類樣本占總體的百分?jǐn)?shù)。餅圖可以直觀地反映出部分與部分、部分與整體之間的數(shù)量關(guān)系。用餅圖進(jìn)行數(shù)據(jù)分布分析【例8.5】使用餅圖展示各成績(jī)等級(jí)的人數(shù)分布。A等：大于等于90分；B等：8089分；C等：7079分；D等：6069分；E等：小于60分。 。新建一個(gè)空網(wǎng)站W(wǎng)85_PieDB，添加一個(gè)Web窗口PieDB.aspx，然后分別對(duì)前后臺(tái)進(jìn)行編程。后臺(tái)數(shù)據(jù)準(zhǔn)備繪制餅圖需要的JSON數(shù)組格式：name:“A等”,value:3,name:“B等”,value:5，數(shù)組中每個(gè)JSON對(duì)象描述一個(gè)等級(jí)的人數(shù)。完整代碼如下（省略頭部引用部分）：把分?jǐn)?shù)轉(zhuǎn)換成相

11、應(yīng)的等級(jí)記錄各個(gè)等級(jí)的人數(shù)把數(shù)組轉(zhuǎn)換成JSON格式的字符串前臺(tái)頁(yè)面繪圖自定義函數(shù)function myPie(d1)，帶有一個(gè)參數(shù)d1option中series的類型type值為“pie”數(shù)據(jù)序列data值設(shè)為d1頁(yè)面HTML源代碼中button1的onclick事件調(diào)用接收后臺(tái)程序傳遞來(lái)的數(shù)據(jù)ClassData散點(diǎn)圖描述兩個(gè)一維數(shù)據(jù)序列之間的關(guān)系，它將兩組數(shù)據(jù)分別作為點(diǎn)的橫坐標(biāo)和縱坐標(biāo)，可以表示兩個(gè)指標(biāo)的相關(guān)關(guān)系。通過(guò)散點(diǎn)圖可以分析兩個(gè)數(shù)據(jù)序列之間是否具有線性關(guān)系，輔助建立合理的預(yù)測(cè)模型。用散點(diǎn)圖進(jìn)行數(shù)據(jù)關(guān)聯(lián)分析【例8.6】使用散點(diǎn)圖對(duì)學(xué)生的年齡和考試成績(jī)進(jìn)行相關(guān)性分析。可以觀察到隨著年齡增

12、大，成績(jī)呈下降趨勢(shì)。分析學(xué)生年齡和考試成績(jī)的相關(guān)性后臺(tái)數(shù)據(jù)準(zhǔn)備繪制散點(diǎn)圖需要的JSON數(shù)組格式為：x1,y1,x2,y2,，數(shù)組中每個(gè)元素描述一個(gè)點(diǎn)坐標(biāo)，x表示年齡，y表示成績(jī)。完整代碼如下（省略頭部引用部分）：前臺(tái)頁(yè)面繪圖自定義繪圖函數(shù)myScatter(d1)參數(shù)d1用于接收后臺(tái)程序傳遞來(lái)的數(shù)據(jù)ScoreDataoption中的series數(shù)據(jù)系列的圖表類型type值為scatter， data值為d1。代碼中button1的OnClick事件調(diào)用將數(shù)據(jù)與其在地域上的分布情況用各種幾何圖形、實(shí)物形象或不同線紋、顏色等在地圖上表示出來(lái)的圖形，稱為數(shù)據(jù)地圖。數(shù)據(jù)地圖可以直觀地描述某種現(xiàn)象的地域分布。用數(shù)據(jù)地圖進(jìn)行數(shù)據(jù)分布分析【例8.7】統(tǒng)計(jì)學(xué)生生源分布信息，在GIS地圖上以顏色的深淺表示各省市生源數(shù)量。新建一個(gè)空網(wǎng)站W(wǎng)87_GISDB，添加一個(gè)Web窗口GIS.aspx，然后分別對(duì)前后臺(tái)進(jìn)行編程。后臺(tái)數(shù)據(jù)準(zhǔn)備繪制地圖需要的JSON數(shù)組格式：name: 上海, value:5, name: