Flex2 Chart - Notes

最近写了一点点Flex2 Chart的代码, 记录下一些东西:

1. chart界面各组成部分一般都是可以自定义的, 对应各自的render.

2. 改变PlotSeries中点的颜色, 没有直接的color属性, 需要设置它的style实现. 如下面代码改变点的颜色为0xeec500:
<mx:PlotSeries id="plot1" xField="day" yField="price"
     itemRenderer="mx.charts.renderers.CircleItemRenderer" radius="4"
     creationComplete="plot1.setStyle('fill', [0xeec500]);"/>

3. Axis如CategoryAxis的属性ticksBetweenLabels用来确定坐标轴上的标签和刻度位置的对应关系.

官方文档是这样描述的: "Specifies the location of major tick marks on the axis, relative to the category labels. If true, tick marks (and any associated grid lines) appear between the categories. If false, tick marks appear in the middle of the category, aligned with the label. "

另外, 坐标轴标签支持一些html标签如font等.
   
4. 自定义Chart中的dataTip(如插入图片等).

1). dataTip与toolTip类似, 只是它显示鼠标所在位置相近的一个范围内的控件的tip. dataTip是由chart组件(如ColumnChart)负责显示的, 而不是由chart图中需显示tip的部分(如某个LineSeries)控制. 所以重定义LineSeries的render对dataTip是无效的.

属性showDataTips表示是否显示dataTips. dataTipMode有两种: single和multiple, 这两个不是单行和多行的意思; 而是前者显示符合一定范围的最近的某个控件的dataTip, 后者显示符合一定范围的所有控件的dataTips.

2). 如果仅仅是自定义dataTip中的内容, 那么可以设置属性dataTipFunction, 如dataTipFunction="dtFunc", 再定义function dtFunc(hitData:HitData):String, 返回值即为内容. dataTip内容支持一些html标签, 主要是有关显示大小, 颜色的标签, 而非位置之类的结构化标签. 它支持的标签有<b>, <br>, <font>, <i>, <img>等, 也支持/n. img标签就可用来加入图片, 不过在鼠标稍微变化时会闪烁, 不知原因. tip中内容具体的位置信息, 如居中等并不能通过HTML标签来实现.

另外参数中hitData.element为被激发dataTip的某个Series控件, 通过这个可以取得其属性值. 这样就dataTip虽然由chart组件控制, 却能实现针对于不同的Series, 实现不同的自定义. hitData.item为Series上的item, 可以取得该toolTip激发点对应的横纵坐标的值, 如文中第2点的例子横纵坐标值为hitData.item.day, hitData.item.price.

3). 重定义dataTipRenderer可以创造很自由的效果.

作为dataTipRenderer的类必须实现IFlexDisplayObject和IDataRenderer两个接口; 而一般的Flex容器组件, 如VBox等, 都已经实现了这两个接口; 所以创建自定义MXML组件, 可以作为dataTipRenderer. 自定义MXML组件加入图片, 按钮等等自然很轻松.

具体例如设置chart组件属性dataTipRenderer="FlightDatatipSkin", 再创建MXML组件FlightDatatipSkin. 该组件取得chart上显示的数据的方法是, 重载FlightDatatipSkin中data方法(override public function set data(value:Object):void), 参数value实际为HitData类型, 与上面提到的dataTipFunction中的参数是一样的, 它所能获取的数据自然也一样. 其他数据可以通过全局变量传给该render, 因为设置render时好像不能带参数. 可以参看例子: Skinning Chart DataTips in Flex 2(http://flash.johnnynesbitt.com/?p=4).