ch09、ExtJs4中的圖形與圖表

BF-TECH-J2EE軟件開發(fā)工程師就業(yè)課程level4-富客戶端技術(shù)篇&&工具篇

課程四

【Struts2+Spring3+Hibernate4+DWR

+ExtJS4.0開發(fā)富客戶端商業(yè)應(yīng)用】

講師：風(fēng)舞煙、飛揚(yáng)第九章、ExtJs4中的圖形與圖表目錄一、SVG簡介二、使用圖形功能初探三、DrawComponent、Surface、DrawSprite、CompositeSprite對象的配置項(xiàng)、屬性、方法與事件四、使用基本圖形五、使用路徑（Path）六、移動、旋轉(zhuǎn)和縮放圖形七、用漸變效果八、使用圖層九、第一個折線圖表十、顯示多個折線圖十一、簡單條形圖（Bar和ColumnChart）十二、使用餅圖十三、使用時(shí)間軸十四、使用組合圖十五、在圖表中使用背景一、SVG簡介什么是SVG？SVG指可伸縮矢量圖形(ScalableVectorGraphics)SVG用來定義用于網(wǎng)絡(luò)的基于矢量的圖形SVG使用XML格式定義圖形SVG圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失SVG是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)SVG與諸如DOM和XSL之類的W3C標(biāo)準(zhǔn)是一個整體SVG的歷史和優(yōu)勢在2003年一月，SVG1.1被確立為W3C標(biāo)準(zhǔn)。參與定義SVG的組織有：太陽微系統(tǒng)、Adobe、蘋果公司、IBM以及柯達(dá)。與其他圖像格式相比，使用SVG的優(yōu)勢在于：SVG可被非常多的工具讀取和修改（比如記事本）SVG與JPEG和GIF圖像比起來，尺寸更小，且可壓縮性更強(qiáng)。SVG是可伸縮的SVG圖像可在任何的分辨率下被高質(zhì)量地打印SVG可在圖像質(zhì)量不下降的情況下被放大SVG圖像中的文本是可選的，同時(shí)也是可搜索的（很適合制作地圖）SVG可以與Java技術(shù)一起運(yùn)行SVG是開放的標(biāo)準(zhǔn)SVG文件是純粹的XMLSVG的主要競爭者是Flash。與Flash相比，SVG最大的優(yōu)勢是與其他標(biāo)準(zhǔn)（比如XSL和DOM）相兼容。而Flash則是未開源的私有技術(shù)。二、使用圖形功能初探示例1：1.html示例2：2.html示例3:3.html三、DrawComponent、Surface、DrawSprite、CompositeSprite對象的配置項(xiàng)、屬性、方法與事件/lujunql/article/details/7078912items：由DrawSprite對象組成的數(shù)組viewBox：布爾值，默認(rèn)為true，圖形將支持縮放、改變位置或進(jìn)行旋轉(zhuǎn)。屬性：無方法：createSurface：創(chuàng)建Surface實(shí)例DrawComponent

DrawComponent派生于Componet對象，在initComponent方法中添加了6個事件：mousedown、mouseup、mousemove、mouseenter、mouseleave和click，重點(diǎn)是渲染onRender，渲染完畢后調(diào)用createSurface方法開始創(chuàng)建接口配置項(xiàng)：autoSize：布爾值，綁定圖形的div元素是否根據(jù)內(nèi)容調(diào)整大小，默認(rèn)為falseGradients：數(shù)組，漸變的配置對象組成。這些效果主要用于DrawSprite對象的fill屬性。每個效果都有id、angle和stops三個配置項(xiàng)。其中id為效果的唯一名稱；angle是角度，漸變的角度；stops用于定義從什么顏色過渡到什么顏色，其值0——100SurfaceSurface對象是svg的和vml對象的基類，主要作用是提供接口，把畫筆的數(shù)據(jù)轉(zhuǎn)換為圖形語言，然后渲染到畫布上。配置項(xiàng)：height：圖形的高度，默認(rèn)為autowidth：圖形的寬度，默認(rèn)為auto方法：add：在圖形中添加一個DrawSprite對象，注意：不會自動渲染新添加的對象addCls：為指定的DrawSprite對象添加樣式addGradient：增加漸變效果getGroup：根據(jù)指定的id獲取圖層（CompositeSprite對象實(shí)例）getId：返回組件的idremove：刪除指定的DrawSprite對象removeAll：移除所有的DrawSprite對象removeCls：移除指定的DrawSprite對象的樣式setSize：設(shè)置Surface的大小setStyle：指定的DrawSprite對象的樣式屬性setText：設(shè)置指定的DrawSprite對象的顯示文本事件:create：當(dāng)Surface實(shí)例創(chuàng)建后觸發(fā)該事件DrawSpriteDrawSprite對象的作用就是把svg或vml的基本形狀平滑的在extjs中做成統(tǒng)一的形狀接口，在渲染時(shí)，會根據(jù)type屬性將其轉(zhuǎn)換為對應(yīng)的圖形代碼。配置項(xiàng)：fill：填充的顏色，如果是漸變效果，格式為“url(#gradientId)”,gradientId就是為gradients配置項(xiàng)中漸變效果配置對象的id的值font：定義字體，語法與css的font一樣group：DrawSprite對象根據(jù)該屬性分組，同組的對象可以隱藏或者顯示，可以理解為圖層的idheight：當(dāng)type為rect時(shí)，表示矩形的高度opacity：不透明度path：由路徑組成的數(shù)組，使用類似于svg圖形的path語法radius：當(dāng)type為circle時(shí)，設(shè)置圓的半徑size：當(dāng)type為square時(shí)，設(shè)置正方形的尺寸stroke：設(shè)置形狀的邊框顏色stroke-width：設(shè)置形狀的邊框?qū)挾萾ext：設(shè)置顯示文本type：設(shè)置圖形的類型：circle（圓）、rect（矩形）、text（文本）、path（路徑）、ellipse（橢圓）、square（正方形，沒實(shí)現(xiàn)）和imag（圖片）width：當(dāng)type為rect時(shí)，設(shè)置矩形的寬度x：圖形位置的x坐標(biāo)y：圖形位置的y坐標(biāo)translate：移動圖形到指定的坐標(biāo)，為x和yrotate：旋轉(zhuǎn)圖形。配置項(xiàng)degree用于指配置項(xiàng)定旋轉(zhuǎn)角度，x、y可用于旋轉(zhuǎn)中心scale：縮放圖形。配置項(xiàng)為x、y用于指定向x或y軸的縮放倍數(shù)，配置項(xiàng)cx、cy用于指定縮放的中心點(diǎn)屬性：dd：執(zhí)行DrawSource對象實(shí)例方法：addCls：添加樣式getBBox：返回邊界hide：隱藏DrawSprite對象，如果參數(shù)設(shè)置為true，會重新畫對象redraw：重畫對象remove：移除對象removeCls：移除對象的樣式setAttributes：設(shè)置對象的屬性setStyle：設(shè)置對象的Style屬性show：顯示對象，如果參數(shù)設(shè)置為true，會重畫對象事件：無CompositeSprite派生于MixedCollection對象，因而具有MixedCollection對象的功能，在其基礎(chǔ)上添加了mousedown、mouseup、mousemove、mouseout和click方法，還添加了圖層操作需要的hide和show等方法配置項(xiàng)：無屬性：無方法：add：添加DrawSprite對象到圖層getBBox：hide：隱藏圖層，隱藏組內(nèi)所有DrawSprite對象remove：從圖層中刪除DrawSprite對象setAttributes：為圖層內(nèi)所有DrawSprite對象添加屬性show：顯示圖層事件：無四、使用基本圖形示例：4.html需要注意的一些參數(shù)：矩形常用的配置項(xiàng)：x、y：左上角坐標(biāo)with、height：矩形的寬和高fill：填充顏色stroke、stroke-width、stroke-opacity：邊框、邊框?qū)挾群瓦吙虻牟煌该鞫萶pacity和fill-opacity：不透明度和填充的不透明度1:show0:hide圓常用的配置項(xiàng)：x、y：圓心坐標(biāo)，不要用cx、cy，否則vml格式不顯示radius：半徑rx、ry：水平半徑和垂直半徑邊框、填充、不透明度等配置同矩形橢圓常用的配置項(xiàng)：x、y：圓心坐標(biāo)rx、ry：水平半徑和垂直半徑邊框、填充、不透明度等配置同矩形文字常用的配置項(xiàng)：x、y：左上角坐標(biāo)font-family：字體名稱font-size：字體大小font-weight：粗細(xì)font-style：字體樣式text-anchor：文字錨固位置邊框、填充、不透明度等配置同矩形使用圖片width、height：圖片的寬度和高度src：圖片的路徑其他配置項(xiàng)省略，問題較多，不好用五、使用路徑（Path）參數(shù)：M：移動到某個點(diǎn)，給出點(diǎn)的坐標(biāo)（x、y）Z：結(jié)束路徑L：在當(dāng)前點(diǎn)與指定點(diǎn)之間畫一條直線，要給出指定點(diǎn)坐標(biāo)（x、y）H：在當(dāng)前點(diǎn)與指定點(diǎn)之間畫一條水平線，要給出指定點(diǎn)x坐標(biāo)V：在當(dāng)前點(diǎn)與指定點(diǎn)之間畫一條垂直線，要給出指定點(diǎn)y坐標(biāo)C：在當(dāng)前點(diǎn)與指定點(diǎn)之間畫一條三次貝塞爾線，要給出3個點(diǎn)的坐標(biāo)（x1、y1；x2、y2；x、y）S：在當(dāng)前點(diǎn)與指定點(diǎn)之間畫一條平滑的三次貝塞爾線，要給出2個點(diǎn)的坐標(biāo)（x2、y2；x、y）Q：在當(dāng)前點(diǎn)與指定點(diǎn)之間畫一條二次貝塞爾線，要給出2個點(diǎn)的坐標(biāo)（x1、y1；x、y）T：在當(dāng)前點(diǎn)與指定點(diǎn)之間畫一條平滑的二次貝塞爾線，要給出1個點(diǎn)的坐標(biāo)（x、y）A：在當(dāng)前點(diǎn)與指定點(diǎn)之間畫一條橢圓弧線，要給出橢圓的兩個半徑、橢圓相對于x軸的旋轉(zhuǎn)角度、大圓弧標(biāo)志、彎曲標(biāo)準(zhǔn)一級指定點(diǎn)坐標(biāo)。注意大小寫，大寫字母表示絕對定位，小寫字母表示相對定位示例：5.html/a569171010/article/details/7572169/wyzxzws/item/55bae9e4183424acc10d75a3六、移動、旋轉(zhuǎn)和縮放圖形示例：6.htmlvarmove={translate:{x:50,y:50}},rotate1={rotate:{degrees:45}},rotate2={rotate:{x:50,y:50,degrees:45}},scale={scale:{x:0,y:0}};七、用漸變效果示例：7.htmlgradients:[ {id:"g1",angle:0,stops:{ 0:{color:"#f00"}, 100:{color:"#0f0"} }}, {id:"g2",angle:0,stops:{ 0:{color:"#f00"}, 50:{color:"#00f"}, 100:{color:"#0f0"} }}, {id:"g3",angle:45,stops:{ 0:{color:"#f00"}, 100:{color:"#0f0"} }} ],八、使用圖層示例：8.html使用圖表Chart參數(shù)：axex坐標(biāo)軸；series：圖表類型定義Axex坐標(biāo)軸配置項(xiàng)：坐標(biāo)軸有：Numeric、Category、TimeAxis和GaugeAxis，GaugeAxis直接繼承與AbstractAxis，其余三個直接或間接繼承與Axis，有共同的配置。配置項(xiàng)：dashSize：刻度線的長度或高度，默認(rèn)為3grid：布爾值或?qū)ο螅瑃rue表示顯示網(wǎng)格線。為對象時(shí)，可通過配置項(xiàng)odd設(shè)置奇數(shù)行顯示格式，而even則可設(shè)置偶數(shù)行的顯示格式。無論是odd還是even，其值都是一個DrawSprite對象length：坐標(biāo)軸位置的偏移量，默認(rèn)為0majorTickSteps：設(shè)置著表軸如何劃分坐標(biāo)的主刻度，如：坐標(biāo)軸最小值為0，最大值為40，該值為40，則主刻度的間隔是1。使用時(shí)需要注意，如果該值大于最大值和最小值之差，且計(jì)算出來的每格刻度四舍五入之后不是1，那么就會出現(xiàn)錯誤。設(shè)置該值，應(yīng)該保證每格間隔至少是1.minorTickSteps：指定在兩個刻度之間如何劃分小刻度，默認(rèn)為0，沒有小刻度。position：坐標(biāo)軸位置：left、bottom、right、top。默認(rèn)為bottomwidth：坐標(biāo)軸寬度和偏移量，默認(rèn)0label：為DrawSprite對象配置項(xiàng)鍍錫iang，用來設(shè)置刻度上標(biāo)簽的現(xiàn)實(shí)方式title：坐標(biāo)軸的標(biāo)題Numeric的配置項(xiàng)：adjustMaximumByMajorUnit：布爾值，在最接近最大刻度時(shí)在加上一個刻度，有問題，可能是四舍五入造成的，默認(rèn)為falseadjustMinimumByMajorUnit：布爾值，在最接近最小刻度時(shí)在加上一個刻度，有問題，可能是四舍五入造成的，默認(rèn)為falsedecimals：小數(shù)的顯示位數(shù)，默認(rèn)為2maximum：設(shè)置坐標(biāo)軸最大值minimum：設(shè)置坐標(biāo)軸最小值scale：坐標(biāo)軸縮放時(shí)使用的算法，值可以是linear或logarithmicTimeAxis的配置項(xiàng)：aggregateOp：定義分組的時(shí)候使用的聚合操作，值可以是sum、avg、max、或min，默認(rèn)為sumconstrain：布爾值，如果為true，圖表只會渲染在fromDate到toDate之間的數(shù)據(jù)，默認(rèn)為false，圖表會根據(jù)新值重新計(jì)算坐標(biāo)軸的刻度dateFormate：指定渲染的日期格式fromDate：坐標(biāo)軸的開始時(shí)間setp：包含兩個值得數(shù)組。第一個值表示坐標(biāo)軸的單位，第二個值表示每一個刻度包含多少個單位，默認(rèn)只為[Ext.Date.DAY,1],，表示一個刻度是1天groupBy：設(shè)置每一刻都的時(shí)間單位，值可以使day、month、year或由以上三個使用點(diǎn)組合起來的值，如year.monthtoDate：坐標(biāo)軸的結(jié)束時(shí)間GaugeAxis的配置項(xiàng)：margin：標(biāo)簽和刻度線之間的偏移量，默認(rèn)為0maximum：坐標(biāo)軸的最大值minimum：坐標(biāo)軸的最小值steps：設(shè)置刻度之間的間隔title：坐標(biāo)軸的標(biāo)題label：為DrawSprite對象的配置項(xiàng)，用來設(shè)置刻度上標(biāo)簽的現(xiàn)實(shí)方式。Series對象的配置項(xiàng)、屬性、方法和事件配置項(xiàng)：callouts：Callout對象的配置對象color：標(biāo)簽的顏色，默認(rèn)#000display：指定是否在餅圖的每個切片顯示標(biāo)簽以及標(biāo)簽位置。其值可以是roate、middle、insideStart、insideEnd、outside、over、under或者none，其中none會禁止標(biāo)簽渲染，默認(rèn)為none。font：標(biāo)簽的字體，默認(rèn)為“11pxHelvetica，sans-serif”highlight：布爾值或?qū)ο?，如果為true，當(dāng)鼠標(biāo)經(jīng)過圖表標(biāo)記上面時(shí)，會突出顯示該標(biāo)記。也可以定義為與DrawSprite對象樣式屬性相同的配置項(xiàng)，這樣當(dāng)突出顯示時(shí)，會將樣式應(yīng)用到標(biāo)記。默認(rèn)為false。label：Label對象的配置對象，定義標(biāo)簽listenters：定義事件監(jiān)聽器minMargin：設(shè)置標(biāo)簽到原始顯示效果的距離。該配置通常用于餅圖寬度成為餅圖切片的長度，默認(rèn)為0orientation：設(shè)置圖表的方向，值可以為：horizontal（水平）、vertical（垂直方向）。renderer：渲染樣式，shadowAttributes：陰影屬性組成的數(shù)組showInLegend：布爾值，如果為true，會將該圖表顯示在圖例中。tips：ToolTip的配置對象，定義標(biāo)記的提示信息title：圖表的標(biāo)題type：圖表的類型屬性：highlight：圖表突出顯示的條目方法：getItemForPoint：根據(jù)指定的坐標(biāo)（x、y）返回對應(yīng)的圖表getLegendColor：根據(jù)指定索引返回圖例的顏色hideAll：隱藏圖表所有元素highlightItem：突出顯示指定的條目setTitle：設(shè)置標(biāo)題showAll：顯示圖表所有的元素unHighlightItem：將當(dāng)前突出顯示的條目取消突出顯示效果九、第一個折線圖表配置參數(shù)axis：聲明數(shù)值在哪條坐標(biāo)軸上，如：數(shù)值是y軸的，在左邊，因?yàn)閍xis要設(shè)置為left，否則就像x軸那樣使用相對比例fill：布爾值，如果為true，就會使用style配置項(xiàng)中的fill配置項(xiàng)定義的顏色填充折線下的區(qū)域，不透明度則采用opacity配置項(xiàng)定義的值，默認(rèn)falsemarkerConfig：標(biāo)記的配置對象，用于定義標(biāo)記的顯示樣式，值可以為DrawSprite對象的配置對象。只有showMarkers設(shè)置為true時(shí)才有效selectionTolerance：定義光標(biāo)位置與折線位置之間的可觸發(fā)時(shí)間的距離。默認(rèn)為20showMarkers：布爾值，如果為true，會在數(shù)據(jù)點(diǎn)上顯示標(biāo)記。默認(rèn)為falsesmooth：如果為true或者非0值，點(diǎn)之間的連線會很平滑的環(huán)繞數(shù)據(jù)點(diǎn)。否則使用直線連接數(shù)據(jù)點(diǎn)style：定義連線的樣式，該樣式會覆蓋主題樣式xField：定義應(yīng)用在x軸的數(shù)據(jù)的字段名稱yField：定義應(yīng)用在y軸的數(shù)據(jù)的字段名稱散點(diǎn)圖的配置與折線圖一樣示例：9.html十、顯示多個折線圖示例：10.htmlLegend配置項(xiàng)（圖例）boxFill：定義圖例容器的填充顏色。默認(rèn)白色boxStrok額：定義圖例容器的邊框顏色。默認(rèn)黑色boxStrokeWidth：定義圖例容器的邊框?qū)挾?。默認(rèn)1boxZIndex：定義圖例的z-inde。默認(rèn)100itemSpacing：圖例條目之間的空白間隔量，默認(rèn)10labelFont：標(biāo)簽的字體。默認(rèn)是“12pxhelvetica”padding：定義圖例容器的內(nèi)補(bǔ)丁。默認(rèn)值5position：定義圖例的位置，值可以是：top、bottom、left、right或float。如果為float，圖例會根據(jù)x、y配置項(xiàng)進(jìn)行定位。默認(rèn)為bottomvisible：布爾值，如果為false，將不顯示圖例，默認(rèn)為truex、y：定義圖例的右上角坐標(biāo)，position：float時(shí)生效設(shè)置圖表的showInlegend=false則不顯示圖例十一、簡單條形圖（Bar和ColumnCha