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'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)