ch09、ExtJs4中的圖形與圖表

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

課程四

【Struts2+Spring3+Hibernate4+DWR

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

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

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