flex Chart相关属性

Flex 图表控件可以创建一些最常用的图表类型，并且自定义其表现形式。图表控件在 mx.charts.* 包中。

下表列出了提供 Flex 提供的图表类型、控件类名以及用来定义每个图表的数据表示的序列类名。

图表类型         图表控件类  图表序列类 
Area              AreaChart AreaSeries
Bar               BarChart BarSeries
Bubble            BubbleChart BubbleSeries
Candlestick       CandlestickChart CandlestickSeries
Column            ColunmChart ColumnSeries
HighLowOpenClose  HLOCChart HLOCseries
Line              LineChart LineSeries
Pie               PieCahrt PieSeries
Plot              PlotChart PlotSeries



所有的图表控件，除了 PieChart 类之外，都是 CartesianChart 类的子类。 笛卡尔图表（ Cartesian Chart ）专门用来在矩形和二维空间表示数据点集。 PieChart 类是 PolarChart 类的子类，它表示圆形区域的数据。

所有的图表控件都继承自 ChartBase 类的基本图形特征


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)