16.4.设计图表的刻度线
16.4.1. 问题
我需要自定义图表的刻度线
16.4.2. 解决办法
使用AxisRenderer 中的样式来设置图表刻度线的外观
16.4.3.讨论
通过样式，Flex 提供了大量控制刻度线外观的方法。在Flex 图表中有两种类型的刻度线，分别是大刻度线和小刻度线。大刻度线与坐标轴的标签相对应，小刻度线通常用在大刻度线之间。
在AxisRenderer 中可以定义图表刻度线的外观样式。大刻度线可用tickPlacement、tickAlignment 和tickLength 来定义样式；小刻度线可用minorTickPlacement、minorTickAlignment 和minorTickLength 来定义样式。
tickMarkPlacement 和minorTickPlacement 定义刻度线在坐标线的那个位置出现。表16-1列出了相关参数值。
以下这个例子将大刻度线定在坐标线的内侧，小刻度线定在坐标线的外侧。大刻度线是5个像素长，小刻度线是10 像素长。
我需要自定义图表的刻度线
16.4.2. 解决办法
使用AxisRenderer 中的样式来设置图表刻度线的外观
16.4.3.讨论
通过样式，Flex 提供了大量控制刻度线外观的方法。在Flex 图表中有两种类型的刻度线，分别是大刻度线和小刻度线。大刻度线与坐标轴的标签相对应，小刻度线通常用在大刻度线之间。
在AxisRenderer 中可以定义图表刻度线的外观样式。大刻度线可用tickPlacement、tickAlignment 和tickLength 来定义样式；小刻度线可用minorTickPlacement、minorTickAlignment 和minorTickLength 来定义样式。
tickMarkPlacement 和minorTickPlacement 定义刻度线在坐标线的那个位置出现。表16-1列出了相关参数值。
Table 16-1. 刻度线的值和位置
以下这个例子将大刻度线定在坐标线的内侧，小刻度线定在坐标线的外侧。大刻度线是5个像素长，小刻度线是10 像素长。
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" backgroundColor="0xFFFFFF">
<mx:Script>
<![CDATA[
[Bindable] public var chartDP:Array = [
{day:'Monday',rainfall:10,elevation:100,temperature:78},
{day:'Tuesday',rainfall:7,elevation:220,temperature:66},
{day:'Wednesday',rainfall:5,elevation:540,temperature:55},
{day:'Thursday',rainfall:8,elevation:60,temperature:84},
{day:'Friday',rainfall:11,elevation:390,temperature:52},
{day:'Saturday',rainfall:12,elevation:790,temperature:45},
{day:'Sunday',rainfall:14,elevation:1220,temperature:24}
];
]]>
</mx:Script>
<mx:Style>
.customTicks {
tickPlacement:inside;
minorTickPlacement:outside;
tickLength:5;
minorTickLength:10;
}
</mx:Style>
<mx:Canvas label="Area">
<mx:AreaChart dataProvider="{chartDP}" >
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{chartDP}"
categoryField="day" />
</mx:horizontalAxis>
<mx:verticalAxis> <mx:LinearAxis id="vertAxis" />
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{vertAxis}" styleName="customTicks" />
</mx:verticalAxisRenderers>
<mx:series>
<mx:AreaSeries yField="rainfall" displayName="rainfall" />
</mx:series>
</mx:AreaChart>
</mx:Canvas>
</mx:Application>
<mx:Script>
<![CDATA[
[Bindable] public var chartDP:Array = [
{day:'Monday',rainfall:10,elevation:100,temperature:78},
{day:'Tuesday',rainfall:7,elevation:220,temperature:66},
{day:'Wednesday',rainfall:5,elevation:540,temperature:55},
{day:'Thursday',rainfall:8,elevation:60,temperature:84},
{day:'Friday',rainfall:11,elevation:390,temperature:52},
{day:'Saturday',rainfall:12,elevation:790,temperature:45},
{day:'Sunday',rainfall:14,elevation:1220,temperature:24}
];
]]>
</mx:Script>
<mx:Style>
.customTicks {
tickPlacement:inside;
minorTickPlacement:outside;
tickLength:5;
minorTickLength:10;
}
</mx:Style>
<mx:Canvas label="Area">
<mx:AreaChart dataProvider="{chartDP}" >
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{chartDP}"
categoryField="day" />
</mx:horizontalAxis>
<mx:verticalAxis> <mx:LinearAxis id="vertAxis" />
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{vertAxis}" styleName="customTicks" />
</mx:verticalAxisRenderers>
<mx:series>
<mx:AreaSeries yField="rainfall" displayName="rainfall" />
</mx:series>
</mx:AreaChart>
</mx:Canvas>
</mx:Application>
加支付宝好友偷能量挖...
