Chapter11 -大數(shù)據(jù)基礎(chǔ)編程、實(shí)驗(yàn)和案例教程-第11章-典型的可視化工具的使用方法_第1頁
Chapter11 -大數(shù)據(jù)基礎(chǔ)編程、實(shí)驗(yàn)和案例教程-第11章-典型的可視化工具的使用方法_第2頁
Chapter11 -大數(shù)據(jù)基礎(chǔ)編程、實(shí)驗(yàn)和案例教程-第11章-典型的可視化工具的使用方法_第3頁
Chapter11 -大數(shù)據(jù)基礎(chǔ)編程、實(shí)驗(yàn)和案例教程-第11章-典型的可視化工具的使用方法_第4頁
Chapter11 -大數(shù)據(jù)基礎(chǔ)編程、實(shí)驗(yàn)和案例教程-第11章-典型的可視化工具的使用方法_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第11章典型的可視化工具的使用方法提綱11.1D3可視化庫的使用方法11.2使用ECharts圖表制作11.1D3可視化庫的使用方法11.1.1D3可視化庫的安裝11.1.2基本操作11.1.1D3可視化庫的安裝D3是一個(gè)JavaScript函數(shù)庫，這里所說的“安裝”，并非通常意義上的安裝，而只需要在HTML中引用一個(gè)D3.js文件即可。可以有兩種方法引用D3.js文件：方法1：訪問D3.js官網(wǎng)（/），下載D3.js文件，解壓后，在HTML文件中包含相關(guān)的js文件即可。方法2：直接包含網(wǎng)絡(luò)的鏈接，即在HTML文件中寫入如下代碼：<scriptsrc="/d3.v5.min.js"charset="utf-8"></script>方法1是把D3.js文件下載到本地使用，所以，在使用過程中不需要連接網(wǎng)絡(luò)。而方法2則需要在使用過程中能夠連接到互聯(lián)網(wǎng)。11.1.2基本操作1.添加元素比如，選擇body標(biāo)簽，為之添加一個(gè)p標(biāo)簽，并設(shè)置它的內(nèi)容為“Newparagraph！”，則可以使用如下JavaScript語句：d3.select("body").append("p").text("Newparagraph!");需要把這行JavaScript語句放入HTML代碼中，文件名為example1.html，如下所示：11.1.2基本操作<html><head><metacharset="utf-8"><title>D3測試</title><scripttype="text/javascript"src="/d3.v5.min.js"></script></head><body><scripttype="text/javascript">d3.select("body").append("p").text("Newparagraph!");</script></body></html>11.1.2基本操作2.數(shù)據(jù)綁定D3可以處理哪些類型的數(shù)據(jù)？它可以接受幾乎任何數(shù)字?jǐn)?shù)組、字符串或?qū)ο螅ū旧戆渌麛?shù)組或鍵/值對），還可以處理JSON和GeoJSON。下面給出一段實(shí)例代碼，文件名稱為example2.html：<!DOCTYPEhtml><html><head><title>testD3-1.html</title><scripttype="text/javascript"src="/d3.v5.min.js"></script></head><body>ThisismyHTMLpage.<br></body><scripttype="text/javascript">

vardataset=[5,10,15,20,25];d3.select("body").selectAll("p").data(dataset).enter().append("p").text("Newparagraph!");</script></html>11.1.2基本操作上面這段代碼解釋如下：d3.select("body")：查找DOM中的body。selectAll("p")：選擇DOM中的所有段落。data(dataset)：計(jì)數(shù)和分析數(shù)據(jù)值。本實(shí)例中，dataset中有五個(gè)值，每個(gè)值都會(huì)執(zhí)行一次。enter()：綁定數(shù)據(jù)和DOM元素。這個(gè)方法將數(shù)據(jù)傳遞到DOM中。如果數(shù)據(jù)值比相應(yīng)的DOM元素多，就用enter()創(chuàng)建一個(gè)新元素的占位符。append("p")：通過enter()創(chuàng)建的占位符，在DOM中插入一個(gè)p元素。text("Newparagraph!")：為新創(chuàng)建的p標(biāo)簽插入一個(gè)文本值。11.1.2基本操作11.1.2基本操作3.用層畫條形圖（1）為同類層添加樣式div.bar{display:inline-block;width:20px;height:75px;/*We'lloverridethislater*/background-color:teal;}（2）聲明要為某類層設(shè)置屬性.attr("class","bar")11.1.2基本操作（3）為每個(gè)特定的層設(shè)置屬性.style("height",function(d){

var

barHeight=d*5;//Scaleupbyfactorof5returnbarHeight+"px";});（4）設(shè)置層之間的間隔margin-right:2px;11.1.2基本操作（5）完整的源代碼<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>testD3-3-drawingDivBar</title><scripttype="text/javascript"src="/d3.v5.min.js"></script><styletype="text/css">div.bar{display:inline-block;width:20px;height:75px;/*GetsoverridenbyD3-assignedheightbelow*/margin-right:2px;background-color:teal;}</style></head><body><scripttype="text/javascript">

vardataset=[5,10,15,20,25];d3.select("body").selectAll("div").data(dataset).enter().append("div").attr("class","bar").style("height",function(d){

var

barHeight=d*5;returnbarHeight+"px";});</script></body></html>11.1.2基本操作4.繪制SVG圖形（1）簡單形狀SVG標(biāo)簽包含一些視覺元素，包括矩形、圓形、橢圓形、線條、文字和路徑等。繪制SVG圖形采用了基于像素的坐標(biāo)系統(tǒng)，其中，瀏覽器的左上角是原點(diǎn)(0,0)，x和y的正方向分別是右和下。（a）矩形使用x和y的指定左上角的坐標(biāo)，width和height指定尺寸。繪制SVG矩形的代碼如下：<rectx="0"y="0"width="500"height="50"/>（b）圓使用cx和cy指定半徑的中心的坐標(biāo)，使用?表示半徑。例如：<circlecx="250"cy="25"r="25"/>11.1.2基本操作（c）橢圓使用cx和cy指定半徑的中心的坐標(biāo)，rx和ry分別指定x方向和y方向上圓的半徑，例如：<ellipsecx="250"cy="25"rx="100"ry="25"/>（d）線使用x1和Y1到指定線的一端的坐標(biāo)，x2和y2指定另一端的坐標(biāo)。stroke指定描邊，使得線是可見的。例如：<linex1="0"y1="0"x2="500"y2="50"stroke="black"/>（e）文本使用x和y指定文本的位置。例如：<textx="250"y="25">Easy-peasy</text>可以給文本設(shè)置樣式。例如：<textx="250"y="155"font-family="sans-serif"font-size="25"fill="gray">Easy-peasy</text>11.1.2基本操作（2）繪圖樣例下面是一段繪制SVG圖形的HTML源代碼<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>testD3-6-SVG.html</title><scripttype="text/javascript"src="/d3.v5.min.js"></script><styletype="text/css">.pumpkin{fill:yellow;stroke:orange;stroke-width:5;}</style></head><body><scripttype="text/javascript"></script><svgwidth=500height=960><rectx="0"y="0"width="500"height="50"/><ellipsecx="250"cy="225"rx="100"ry="25"/><linex1="0"y1="120"x2="500"y2="50"stroke="black"/><textx="250"y="155"font-family="sans-serif"font-size="25"fill="gray">Easy-peasy</text>11.1.2基本操作<circlecx="25"cy="80"r="20"fill="rgba(128,0,128,0.75)"stroke="rgba(0,255,0,0.25)"stroke-width="100"/><circlecx="75"cy="80"r="20"fill="rgba(0,255,0,0.75)"stroke="rgba(0,0,255,0.25)"stroke-width="10"/><circlecx="125"cy="80"r="20"fill="rgba(255,255,0,0.75)"stroke="rgba(255,0,0,0.25)"stroke-width="10"/><rectx="0"y="300"width="30"height="30"fill="purple"/><rectx="20"y="305"width="30"height="30"fill="blue"/><rectx="40"y="310"width="30"height="30"fill="green"/><rectx="60"y="315"width="30"height="30"fill="yellow"/><rectx="80"y="320"width="30"height="30"fill="red"/><circlecx="25"cy="425"r="22"class="pumpkin"/>11.1.2基本操作<circlecx="25"cy="525"r="20"fill="rgba(128,0,128,1.0)"/><circlecx="50"cy="525"r="20"fill="rgba(0,0,255,0.75)"/><circlecx="75"cy="525"r="20"fill="rgba(0,255,0,0.5)"/><circlecx="100"cy="525"r="20"fill="rgba(255,255,0,0.25)"/><circlecx="125"cy="525"r="20"fill="rgba(255,0,0,0.1)"/><circlecx="25"cy="625"r="20"fill="purple"stroke="green"stroke-width="10"opacity="0.9"/><circlecx="65"cy="625"r="20"fill="green"stroke="blue"stroke-width="10"opacity="0.5"/><circlecx="105"cy="625"r="20"fill="yellow"stroke="red"stroke-width="10"opacity="0.1"/></svg></body></html>11.1.2基本操作11.1.2基本操作5.散點(diǎn)圖下面是給出繪制散點(diǎn)圖的一段HTML代碼樣例<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>testD3-9-drawScatterLot.html</title><scripttype="text/javascript"src="/d3.v5.min.js"></script><styletype="text/css"></style></head><body><scripttype="text/javascript">//Widthandheightvarw=600;varh=100;vardataset=[[5,20],[480,90],[250,50],[100,33],[330,95],[410,12],[475,44],[25,67],[85,21],[220,88]];11.1.2基本操作//CreateSVGelementvarsvg=d3.select("body").append("svg").attr("width",w).attr("height",h);svg.selectAll("circle").data(dataset).enter().append("circle").attr("cx",function(d){returnd[0];}).attr("cy",function(d){returnd[1];}).attr("r",function(d){returnMath.sqrt(h-d[1]);});11.1.2基本操作svg.selectAll("text").data(dataset).enter().append("text").text(function(d){returnd[0]+","+d[1];}).attr("x",function(d){returnd[0];}).attr("y",function(d){returnd[1];}).attr("font-family","sans-serif").attr("font-size","11px").attr("fill","red");</script></body></html>11.1.2基本操作11.2使用ECharts圖表制作11.2.1ECharts簡介11.2.2ECharts圖表制作方法11.2.1ECharts簡介ECharts是由百度公司前端數(shù)據(jù)可視化團(tuán)隊(duì)研發(fā)的圖表庫，可以流暢地運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11、Chrome、Firefox、Safari等），底層依賴輕量級的、Canvas類庫ZRender，可以提供直觀、生動(dòng)、可交互、可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。ECharts提供了非常豐富的圖表類型，包括常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap，用于多維數(shù)據(jù)可視化的平行坐標(biāo)，以及用于BI的漏斗圖、儀表盤，并且支持圖與圖之間的混搭，能夠滿足用戶絕大部分分析數(shù)據(jù)時(shí)的圖表制作需求。11.2.2ECharts圖表制作方法1.下載ECharts可以在Windows或Linux系統(tǒng)中打開瀏覽器進(jìn)行可視化圖表制作，但是，建議在Windows系統(tǒng)下操作，使用起來會(huì)更加順暢。訪問ECharts官網(wǎng)（），從官網(wǎng)下載界面選擇需要的版本下載，根據(jù)開發(fā)者的不同需求，官網(wǎng)提供了不同的下載文件。需要注意的是，網(wǎng)站下載的ECharts文件名稱不是echarts.js，一般需要手動(dòng)把文件名稱修改為echarts.js，因?yàn)樵贖TML中引入時(shí)的名稱是echarts.js。11.2.2ECharts圖表制作方法2.HTML引入ECharts因?yàn)镋Charts底層是JavaScript，所以可以像JavaScript一樣，直接嵌入到HTML中，如下所示：<!DOCTYPEhtml><html><header><metacharset="utf-8"><!--引入

ECharts

文件--><scriptsrc="echarts.js"></script></header></html>11.2.2ECharts圖表制作方法3.繪制一個(gè)簡單的圖表<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ECharts</title><!--引入echarts.js--><scriptsrc="echarts.js"></script></head><body><!--為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom--><divid="main"style="width:600px;height:400px;"></div><scripttype="text/javascript">//基于準(zhǔn)備好的dom，初始化echarts實(shí)例varmyChart=echarts.init(document.getElementById('main'));//指定圖表的配置項(xiàng)和數(shù)據(jù)varoption={title:{text:'ECharts入門示例'

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論