ch09、ExtJs4中的图形与图表

BF-TECH-J2EE软件开发工程师就业课程level4-富客户端技术篇&&工具篇

课程四

【Struts2+Spring3+Hibernate4+DWR

+ExtJS4.0开发富客户端商业应用】

讲师：风舞烟、飞扬第九章、ExtJs4中的图形与图表目录一、SVG简介二、使用图形功能初探三、DrawComponent、Surface、DrawSprite、CompositeSprite对象的配置项、属性、方法与事件四、使用基本图形五、使用路径（Path）六、移动、旋转和缩放图形七、用渐变效果八、使用图层九、第一个折线图表十、显示多个折线图十一、简单条形图（Bar和ColumnChart）十二、使用饼图十三、使用时间轴十四、使用组合图十五、在图表中使用背景一、SVG简介什么是SVG？SVG指可伸缩矢量图形(ScalableVectorGraphics)SVG用来定义用于网络的基于矢量的图形SVG使用XML格式定义图形SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG是万维网联盟的标准SVG与诸如DOM和XSL之类的W3C标准是一个整体SVG的历史和优势在2003年一月，SVG1.1被确立为W3C标准。参与定义SVG的组织有：太阳微系统、Adobe、苹果公司、IBM以及柯达。与其他图像格式相比，使用SVG的优势在于：SVG可被非常多的工具读取和修改（比如记事本）SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。SVG是可伸缩的SVG图像可在任何的分辨率下被高质量地打印SVG可在图像质量不下降的情况下被放大SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）SVG可以与Java技术一起运行SVG是开放的标准SVG文件是纯粹的XMLSVG的主要竞争者是Flash。与Flash相比，SVG最大的优势是与其他标准（比如XSL和DOM）相兼容。而Flash则是未开源的私有技术。二、使用图形功能初探示例1：1.html示例2：2.html示例3:3.html三、DrawComponent、Surface、DrawSprite、CompositeSprite对象的配置项、属性、方法与事件/lujunql/article/details/7078912items：由DrawSprite对象组成的数组viewBox：布尔值，默认为true，图形将支持缩放、改变位置或进行旋转。属性：无方法：createSurface：创建Surface实例DrawComponent

DrawComponent派生于Componet对象，在initComponent方法中添加了6个事件：mousedown、mouseup、mousemove、mouseenter、mouseleave和click，重点是渲染onRender，渲染完毕后调用createSurface方法开始创建接口配置项：autoSize：布尔值，绑定图形的div元素是否根据内容调整大小，默认为falseGradients：数组，渐变的配置对象组成。这些效果主要用于DrawSprite对象的fill属性。每个效果都有id、angle和stops三个配置项。其中id为效果的唯一名称；angle是角度，渐变的角度；stops用于定义从什么颜色过渡到什么颜色，其值0——100SurfaceSurface对象是svg的和vml对象的基类，主要作用是提供接口，把画笔的数据转换为图形语言，然后渲染到画布上。配置项：height：图形的高度，默认为autowidth：图形的宽度，默认为auto方法：add：在图形中添加一个DrawSprite对象，注意：不会自动渲染新添加的对象addCls：为指定的DrawSprite对象添加样式addGradient：增加渐变效果getGroup：根据指定的id获取图层（CompositeSprite对象实例）getId：返回组件的idremove：删除指定的DrawSprite对象removeAll：移除所有的DrawSprite对象removeCls：移除指定的DrawSprite对象的样式setSize：设置Surface的大小setStyle：指定的DrawSprite对象的样式属性setText：设置指定的DrawSprite对象的显示文本事件:create：当Surface实例创建后触发该事件DrawSpriteDrawSprite对象的作用就是把svg或vml的基本形状平滑的在extjs中做成统一的形状接口，在渲染时，会根据type属性将其转换为对应的图形代码。配置项：fill：填充的颜色，如果是渐变效果，格式为“url(#gradientId)”,gradientId就是为gradients配置项中渐变效果配置对象的id的值font：定义字体，语法与css的font一样group：DrawSprite对象根据该属性分组，同组的对象可以隐藏或者显示，可以理解为图层的idheight：当type为rect时，表示矩形的高度opacity：不透明度path：由路径组成的数组，使用类似于svg图形的path语法radius：当type为circle时，设置圆的半径size：当type为square时，设置正方形的尺寸stroke：设置形状的边框颜色stroke-width：设置形状的边框宽度text：设置显示文本type：设置图形的类型：circle（圆）、rect（矩形）、text（文本）、path（路径）、ellipse（椭圆）、square（正方形，没实现）和imag（图片）width：当type为rect时，设置矩形的宽度x：图形位置的x坐标y：图形位置的y坐标translate：移动图形到指定的坐标，为x和yrotate：旋转图形。配置项degree用于指配置项定旋转角度，x、y可用于旋转中心scale：缩放图形。配置项为x、y用于指定向x或y轴的缩放倍数，配置项cx、cy用于指定缩放的中心点属性：dd：执行DrawSource对象实例方法：addCls：添加样式getBBox：返回边界hide：隐藏DrawSprite对象，如果参数设置为true，会重新画对象redraw：重画对象remove：移除对象removeCls：移除对象的样式setAttributes：设置对象的属性setStyle：设置对象的Style属性show：显示对象，如果参数设置为true，会重画对象事件：无CompositeSprite派生于MixedCollection对象，因而具有MixedCollection对象的功能，在其基础上添加了mousedown、mouseup、mousemove、mouseout和click方法，还添加了图层操作需要的hide和show等方法配置项：无属性：无方法：add：添加DrawSprite对象到图层getBBox：hide：隐藏图层，隐藏组内所有DrawSprite对象remove：从图层中删除DrawSprite对象setAttributes：为图层内所有DrawSprite对象添加属性show：显示图层事件：无四、使用基本图形示例：4.html需要注意的一些参数：矩形常用的配置项：x、y：左上角坐标with、height：矩形的宽和高fill：填充颜色stroke、stroke-width、stroke-opacity：边框、边框宽度和边框的不透明度opacity和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）参数：M：移动到某个点，给出点的坐标（x、y）Z：结束路径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轴的旋转角度、大圆弧标志、弯曲标准一级指定点坐标。注意大小写，大写字母表示绝对定位，小写字母表示相对定位示例：5.html/a569171010/article/details/7572169/wyzxzws/item/55bae9e4183424acc10d75a3六、移动、旋转和缩放图形示例：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参数：axex坐标轴；series：图表类型定义Axex坐标轴配置项：坐标轴有：Numeric、Category、TimeAxis和GaugeAxis，GaugeAxis直接继承与AbstractAxis，其余三个直接或间接继承与Axis，有共同的配置。配置项：dashSize：刻度线的长度或高度，默认为3grid：布尔值或对象，true表示显示网格线。为对象时，可通过配置项odd设置奇数行显示格式，而even则可设置偶数行的显示格式。无论是odd还是even，其值都是一个DrawSprite对象length：坐标轴位置的偏移量，默认为0majorTickSteps：设置着表轴如何划分坐标的主刻度，如：坐标轴最小值为0，最大值为40，该值为40，则主刻度的间隔是1。使用时需要注意，如果该值大于最大值和最小值之差，且计算出来的每格刻度四舍五入之后不是1，那么就会出现错误。设置该值，应该保证每格间隔至少是1.minorTickSteps：指定在两个刻度之间如何划分小刻度，默认为0，没有小刻度。position：坐标轴位置：left、bottom、right、top。默认为bottomwidth：坐标轴宽度和偏移量，默认0label：为DrawSprite对象配置项镀锡iang，用来设置刻度上标签的现实方式title：坐标轴的标题Numeric的配置项：adjustMaximumByMajorUnit：布尔值，在最接近最大刻度时在加上一个刻度，有问题，可能是四舍五入造成的，默认为falseadjustMinimumByMajorUnit：布尔值，在最接近最小刻度时在加上一个刻度，有问题，可能是四舍五入造成的，默认为falsedecimals：小数的显示位数，默认为2maximum：设置坐标轴最大值minimum：设置坐标轴最小值scale：坐标轴缩放时使用的算法，值可以是linear或logarithmicTimeAxis的配置项：aggregateOp：定义分组的时候使用的聚合操作，值可以是sum、avg、max、或min，默认为sumconstrain：布尔值，如果为true，图表只会渲染在fromDate到toDate之间的数据，默认为false，图表会根据新值重新计算坐标轴的刻度dateFormate：指定渲染的日期格式fromDate：坐标轴的开始时间setp：包含两个值得数组。第一个值表示坐标轴的单位，第二个值表示每一个刻度包含多少个单位，默认只为[Ext.Date.DAY,1],，表示一个刻度是1天groupBy：设置每一刻都的时间单位，值可以使day、month、year或由以上三个使用点组合起来的值，如year.monthtoDate：坐标轴的结束时间GaugeAxis的配置项：margin：标签和刻度线之间的偏移量，默认为0maximum：坐标轴的最大值minimum：坐标轴的最小值steps：设置刻度之间的间隔title：坐标轴的标题label：为DrawSprite对象的配置项，用来设置刻度上标签的现实方式。Series对象的配置项、属性、方法和事件配置项：callouts：Callout对象的配置对象color：标签的颜色，默认#000display：指定是否在饼图的每个切片显示标签以及标签位置。其值可以是roate、middle、insideStart、insideEnd、outside、over、under或者none，其中none会禁止标签渲染，默认为none。font：标签的字体，默认为“11pxHelvetica，sans-serif”highlight：布尔值或对象，如果为true，当鼠标经过图表标记上面时，会突出显示该标记。也可以定义为与DrawSprite对象样式属性相同的配置项，这样当突出显示时，会将样式应用到标记。默认为false。label：Label对象的配置对象，定义标签listenters：定义事件监听器minMargin：设置标签到原始显示效果的距离。该配置通常用于饼图宽度成为饼图切片的长度，默认为0orientation：设置图表的方向，值可以为：horizontal（水平）、vertical（垂直方向）。renderer：渲染样式，shadowAttributes：阴影属性组成的数组showInLegend：布尔值，如果为true，会将该图表显示在图例中。tips：ToolTip的配置对象，定义标记的提示信息title：图表的标题type：图表的类型属性：highlight：图表突出显示的条目方法：getItemForPoint：根据指定的坐标（x、y）返回对应的图表getLegendColor：根据指定索引返回图例的颜色hideAll：隐藏图表所有元素highlightItem：突出显示指定的条目setTitle：设置标题showAll：显示图表所有的元素unHighlightItem：将当前突出显示的条目取消突出显示效果九、第一个折线图表配置参数axis：声明数值在哪条坐标轴上，如：数值是y轴的，在左边，因为axis要设置为left，否则就像x轴那样使用相对比例fill：布尔值，如果为true，就会使用style配置项中的fill配置项定义的颜色填充折线下的区域，不透明度则采用opacity配置项定义的值，默认falsemarkerConfig：标记的配置对象，用于定义标记的显示样式，值可以为DrawSprite对象的配置对象。只有showMarkers设置为true时才有效selectionTolerance：定义光标位置与折线位置之间的可触发时间的距离。默认为20showMarkers：布尔值，如果为true，会在数据点上显示标记。默认为falsesmooth：如果为true或者非0值，点之间的连线会很平滑的环绕数据点。否则使用直线连接数据点style：定义连线的样式，该样式会覆盖主题样式xField：定义应用在x轴的数据的字段名称yField：定义应用在y轴的数据的字段名称散点图的配置与折线图一样示例：9.html十、显示多个折线图示例：10.htmlLegend配置项（图例）boxFill：定义图例容器的填充颜色。默认白色boxStrok额：定义图例容器的边框颜色。默认黑色boxStrokeWidth：定义图例容器的边框宽度。默认1boxZIndex：定义图例的z-inde。默认100itemSpacing：图例条目之间的空白间隔量，默认10labelFont：标签的字体。默认是“12pxhelvetica”padding：定义图例容器的内补丁。默认值5position：定义图例的位置，值可以是：top、bottom、left、right或float。如果为float，图例会根据x、y配置项进行定位。默认为bottomvisible：布尔值，如果为false，将不显示图例，默认为truex、y：定义图例的右上角坐标，position：float时生效设置图表的showInlegend=false则不显示图例十一、简单条形图（Bar和ColumnCha