当前位置: 首页 > 工具软件 > Flex-Chart > 使用案例 >

flex chart 的相关属性作用

韶英达
2023-12-01

1.       chart:总体控制
2.       series:定义什么样的数据来展示,x,y轴分别显示什么数据。它是包含相应的seriesItem的Array。SeriesItem封装了极值 点,填充方式,xy数据等。

3.       series 中displayName属性控制tooltip

4.       barest->barseries, columnset->columnset

5.       categoryAxis将某列数据映射到轴上

linerAxis自定义轴数据,最大值和最小值

logAxis用对数形式

datetimeAxis

6.       通过axixrender更改轴的外观specified by the horizontalAxisRenderers or verticalAxisRenderers

7.       chartdata的数据源:

scriptblock,xml,remoteobject,webservice,Httpservice,MXML

数据源类型:

(1)static Array

private var expenses:Array = [

        {Month:"January",Profit:2000,Expenses:1500,Amount:450},

        {Month:"February",Profit:1000,Expenses:200,Amount:600},

        {Month:"March",Profit:1500,Expenses:500,Amount:300},

        {Month:"April",Profit:500,Expenses:300,Amount:500},

        {Month:"May",Profit:1000,Expenses:450,Amount:250},

        {Month:"June",Profit:2000,Expenses:500,Amount:700}

     ];

(1)       MXML:

<mx:Array id="expenses">

     <mx:Object

        Month="January"

        Profit="2000"

        Expenses="1500"

        Amount="450"

     />

     <mx:Object

        Month="February"

        Profit="1000"

        Expenses="200"

        Amount="600"

     />

     <mx:Object

        Month="March"

        Profit="1500"

        Expenses="500"

        Amount="300"

     />

     <mx:Object

        Month="April"

        Profit="500"

        Expenses="300"

        Amount="500"

     />

     <mx:Object

        Month="May"

        Profit="1000"

        Expenses="450"

        Amount="250"

     />

     <mx:Object

        Month="June"

        Profit="2000"

        Expenses="500"

        Amount="700"

     />

  </mx:Array>

或者

<mx:Array id="expenses">

     <mx:Object>

       <mx:Month>January</mx:Month>

       <mx:Profit>2000</mx:Profit>

       <mx:Expenses>1500</mx:Expenses>

       <mx:Amount>450</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>February</mx:Month>

       <mx:Profit>1000</mx:Profit>

       <mx:Expenses>200</mx:Expenses>

       <mx:Amount>600</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>March</mx:Month>

       <mx:Profit>1500</mx:Profit>

       <mx:Expenses>500</mx:Expenses>

       <mx:Amount>300</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>April</mx:Month>

       <mx:Profit>500</mx:Profit>

       <mx:Expenses>300</mx:Expenses>

       <mx:Amount>300</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>May</mx:Month>

       <mx:Profit>1000</mx:Profit>

       <mx:Expenses>450</mx:Expenses>

       <mx:Amount>250</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>June</mx:Month>

       <mx:Profit>2000</mx:Profit>

       <mx:Expenses>500</mx:Expenses>

       <mx:Amount>700</mx:Amount>

     </mx:Object>

  </mx:Array>

(2)       collection

可以排序,增删,过滤。并且和图可以绑定同步。

<mx:ArrayCollection id="expenses">

     <mx:Object>

       <mx:Month>January</mx:Month>

       <mx:Profit>2000</mx:Profit>

       <mx:Expenses>1500</mx:Expenses>

       <mx:Amount>450</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>February</mx:Month>

       <mx:Profit>1000</mx:Profit>

       <mx:Expenses>200</mx:Expenses>

       <mx:Amount>600</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>March</mx:Month>

       <mx:Profit>1500</mx:Profit>

       <mx:Expenses>500</mx:Expenses>

       <mx:Amount>300</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>April</mx:Month>

       <mx:Profit>500</mx:Profit>

       <mx:Expenses>300</mx:Expenses>

       <mx:Amount>300</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>May</mx:Month>

       <mx:Profit>1000</mx:Profit>

       <mx:Expenses>450</mx:Expenses>

       <mx:Amount>250</mx:Amount>

     </mx:Object>

     <mx:Object>

       <mx:Month>June</mx:Month>

       <mx:Profit>2000</mx:Profit>

       <mx:Expenses>500</mx:Expenses>

       <mx:Amount>700</mx:Amount>

     </mx:Object>

  </mx:ArrayCollection>

(3)       随机数据 Math. Random

(4)       结构化数据:例如memory例子。

8.Areachart:

form属性决定形式:segment, step, reverSegment,vertical, horizontal

8.       padding:属性 paddingleft,paddingright,paddingtop,paddingbottom,gutterLeft,gutterRight,gutterTop,gutterBottom(chart 属性)

9.       labelGap: AxisRender属性

10.   tickPlacement minorTickPlacement:AxisRender属性,共有4个值inside,cross,none,outside

tickLength,minorTickLength:AxisRender属性,决定标记长度

showLine:AxisRender属性,是否显示坐标轴。

Showlabels:AxisRender属性,是否显示label

AxisStroke:AxisRender属性,引用一个stroke对象显示,决定颜色,透明度等。

11.   Stroke参数:color,weight,alpha。

Stroke可以用于AxisRender,xxxSeries,linestroke(lineSeries)

12.   fills(Series属性):作用是如何填充seriesItem,定制背景色,可以是固定或者渐变的效果。此外,fillFunction可以在 series中代替fills。

Fills,如果是一个则所有的series取同一值,如果是数组则循环取值。

除了HLCOSeries,都支持fills属性。

Fills可以在series{}内用引用,也可 以<fills><solidcolor><solidcolor><solidcolor>…</fills>

13.   fills如果在chart属性中,则表示背景色。

14.   在css中使用fills,.mychartstyle{fill:#00ff00},在styleName中引用mychartstyle。

15.   如果在css中使用数组:.mychartstyle{fill:#00ff00,#ff0000,#0000ff…}

16.   在fill属性中有linergradient和radialgradient定义渐变,需要具体的GradientEntity。

17.   filters属性加背景投影。如果不想要投影,<mx:seriesFilters><mx:Array/>< /mx:seriesFilters>

18.   gridline,在backgroundElements或annotationElements中使用,表示格线。Gridline可以由以下属性表 示:horizontalAlternateFill horizontalChangeCount orizontalOriginCount horizontalShowOrigin horiztontalTickAligned verticalAlternateFill verticalChangeCount verticalOriginCount verticalShowOrigin verticalTickAligned

19.   如果不想要格线,设置backgroundElements的元素为空数组。

20.   如果要让label字体倾斜,需要引入新的ttf字体,在render中指定,否则只能是竖直的标签。

21.   chartItem代表了一个点,包括数据和render。通过改变series中的itemrender属性,指定它的 itemRenderer="mx.charts.renderers.CrossItemRenderer",或者通过as的setStyle方法,指 定series.setStyle(‘itemRenderer’,new FactoryClass(mx.charts.renderers.CrossItemRenderer));

22.   LineSeries指定两个render:itemRender指定数据的render,lineSegmentRender指定线之间的分割。

AreaSeries指定两个render:areaRender指定area的外观,itemRender指定data的外观。

23.   创建自定义的render,继承ProgramicSkin实现IDataRender接口。

24.   categoryAxis:提供了离散的分类数据,它的dataprovider属性可以是label数组或对象数组。

NumbericAxis:将一组连续的坐标点映射到坐标系中。你经常使用如下三种NumbericAxis:LinerAxis, LogAxis, DateTimeAxis。

DateTimeAxis:支持的数据类型有:date,string,number。通过parseFunction属性可以返回一个date对 象。

可以设置DateTimeAxis的最大值和最小值,但是必须是date类型的。

25.   titleRender可以改变title外观。通常继承ChartLabel创建一个个性化的title,重写createChild和 updateDisplayList方法。

26.   将axisRender的showLabels属性设置为false,可以不显示label。

还可以使用labelFunction(XXXAxis的属性)来定义回调函数。

27.   BarSeries,columnSeries,pieseries支持datalabel。设置XXXseries的labelPosition属性 “inside,outside”等可以显示datalabel。dataLabel的数值可以是LabelField,LabelFunction的数 值。

28.   Datatip Object:

设置xxxchart的showdatatip为true。

设置DataTip的style可以修改datatip的样式。

Xxxchart的dataTipFunction属性可以定义回调函数,改变datatip的样式。其中hitdata.item指的是 xxxSeriesItem。Hitdata.element指的是xxxSeries。

还可以用datatiprender引用一个render来描述datatip。

29.通过调用xxxSeries的fillFunction回调函数来定制每一个item(per-item)的样式,例如根据 threadhold显示不同的颜色。该函数返回一个fill对象,可以是solidcolor、LinearGradient、 RadialGradient。

30.设置axis的baseAtZero为false,由系统自动决定起始点。

31.chart的type属性:

cluster:Barchart和columnchart

overlaid:areachart

100%:累积到100%

stacked:聚集

32. legend:每一项都是ledenditem包括marker和label两部分。缺省情况下,legend使用control的 displayName和fills属性填充自己。可以客户化legend通过                  

     <mx:Legend>

        <mx:LegendItem label="SMITH" fontWeight="bold">

           <mx:fill>

            <mx:SolidColor color="{smithColor}"/>

           </mx:fill>

           <mx:stroke>

            <mx:Stroke color="0xCCCCCC" weight="2"/>

           </mx:stroke>

        </mx:LegendItem>

        <mx:LegendItem label="DECKER" fontWeight="bold">

           <mx:fill>

            <mx:SolidColor color="{deckerColor}"/>

           </mx:fill>

           <mx:stroke>

            <mx:Stroke color="0xCCCCCC" weight="2"/>

           </mx:stroke>

         </mx:LegendItem>

     </mx:Legend>

32.chart支持Mouseevent、chartevent、chartitemevent

33.通过设置xxxSeries的interactive="false"可以屏蔽用户交互事件的发生。但是这样就无法显示datatip,也无 法通过触发事件或调用findDataPoints()发送hitdata对象

34.chart支持的特效有Fade、zoom、slide。

Chart支持标准的效果触发器,如showeffect和hideeffect。

XXXchart有的Effect属性有creationCompleteEffect、hideEffect、showEffect。

ChartSeries独有的Effect是hideDataEffect和showDataEffect,他们是Series的属性。当数据源发 生改变时效果被触发。

Charting独有的效果SeriesInterpolate, SeriesSlide, and SeriesZoom.

35.charting effect的公共属性:

duration:完成效果的时间。

elementOffset:element之间效果的间隔。默认50毫秒。

minimumElementDuration:单个element完成需要花费的时间。

Offset:推迟开始的时间。

36.  SeriesZoom Effect:horizontalFocus,verticalFocus,relativeTo。

37.  可以通过series的setStyle(’showEffect’, rearrangeData)设置属性。其中rearrangeData = new SeriesInterpolate();

38.  还可以通过设置CSS,来引入Effect。

39.  通过BindingUtils.bindproperty方法来绑定slider和effect的属性。

40.  通过hitdata可以获得

hitData = event.hitData;

chartItem = ColumnSeriesItem(hitData.chartItem);

 renderer = chartItem.itemRenderer;

series = ColumnSeries(hitData.element);

41.   drill-down两种方法:(1)改变dataprovider的数据源(2)重新组合数据传给dataprovider

42.     一个chartItem代表了series中的一个实体数据,series是有chartItem组合成的。

43.   如果要对chart的item进行选择,需要设置selectionModel(none,single,multiple)。还要设置series的 selectable属性为true。

44.   chartitem的选择有几种形式:鼠标选择、键盘选择、区域选择、编程选择。

45.   可以通过series的selectedIndices得到选择的items。Series有以下select的属性

selectedItem

selectedItems

selectedIndex

selectedIndices

46.   编程实现selection不会触发change事件。

47.   chartbase类,有以下方法可以选择item。

getNextItem()

getPreviousItem()

getFirstItem()

getLastItem()

通过selectedChartItem,selectedChartItems方法可以得到选择的item,但是不能set,这是只读方法。

48.   chartItem的currentStatus属性包括none, rollOver, selected, disabled, focusedSelected, and focused。

49.   chart的getItemsInRegion()方法返回一个矩形中的所有的items。但是该方法不会触发change事件,也不会改变items的 status。

50.   通过chartItem访问相关的数据。

强制转换成相应的item类型:var csi:ColumnSeriesItem = ColumnSeriesItem(a[i]);

csi.yValue:得到相应的y轴的数据。

Csi.item.Profile:得到对应的item的数据。

Csi.element:得到相应的series。

51.   以下属性改变通过用户交互改变是,触发change事件:

selectedChartItem and selectedChartItems (on the chart)

selectedItem, selectedItems, selectedIndex, and selectedIndices (on the chart&apos;s series)

52.   chartItem的拖拽:

(1)       拖拽源chart的dragEnable属性设置为true;

(2)       目标chart的dropEnable属性设置为false

(3)       在目标chart添加dragEnter和dragDrop监听器

(4)       在dragEnter事件的处理器中,得到目标chart的引用,并且将他在DragManager中注册。调用 DragManager.acceptDragDrop()接受事件。

(5)       在drop事件处理器中,得到拖拽chart item的数组,并且将它加入到目标chart的dataprovider中。

53.   在chart上边添加图形,用以下两个类CartesianDataCanvas、PolarDataCanvas,你可以

在canvas上添加图形或者直接在上边画图。通过addDataChild()方法可以添加DisplayObject到canvas上边,你也 可以用addChild和addChildAt方法。用canvas的updateDataChild方法更新DisplayObject的位置。

可以直接通过画图的方法,例如lineTo,MoveTo,curveTo,drawRec….

调用canvas的clear、removeChild、removeChildAt方法来清除对象。

54.   Canvas可以是前景也可以是背景。把canvas加入到annotationElement中就是前景,加入到backgroundElements 就是背景。

55.   使用data canvas中两点限制:(1)不支持拖拽(2)不能使用select API

如果要在canvas加上offset,需要在addDataChild的方法中加入CartesianCanvasValue的对象。入 下:canvas.addDataChild(columnLabel,

            new CartesianCanvasValue(s, labelOffset),

            new CartesianCanvasValue(n, labelOffset)

 类似资料: