Flex:在Chart中使用样式
Flex中的图表(Chart)拥有非常强的表现力,但如果我们根据自己的需求在Chart中使用样式的话,我们可以让这种表现能力变得更强。对于Chart中样式的使用,Adobe官方网站上有一篇文章进行了详尽的阐述。
原文:http://livedocs.adobe.com/flex/3/html/help.html?content=chartsformatting02.html
如果一个类(或者其父类)实现了IStyleClient
接口,那么我们就可以用CSS来设定其样式属性(Style Property)。以柱状图组件ColumnChart
为例:ColumnChart
由UIComponent
扩展而来,而UIcomponent
实现了IStyleClient
的子接口IAdvancedStyleClient
,因此我们可以用CSS来设定ColumnChart
的样式属性。从上述的继承关系我们还可以看到:所有的UIComponent
均可用CSS来设定其样式属性。
对控件使用CSS
比如,我们可以用控件名作为selector来设定样式:
<?xml version="1.0"?>
<!-- charts/BubbleStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
BubbleChart {
fontFamily:Arial;
fontSize:20;
color:#FF0033;
}
</mx:Style>
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:120, Amount:45},
{Month:"Feb", Profit:1000, Expenses:200, Amount:60},
{Month:"Mar", Profit:1500, Expenses:500, Amount:30}
]);
]]></mx:Script>
<mx:Panel title="Bubble Chart">
<mx:BubbleChart id="myChart"
maxRadius="50"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:series>
<mx:BubbleSeries
xField="Profit"
yField="Expenses"
radiusField="Amount"
/>
</mx:series>
</mx:BubbleChart>
</mx:Panel>
</mx:Application>
其效果为:
样式属性分为”可继承”的与”不可继承”的,像fontSize
和fontFamily
这样的属性是”可继承”的 — 在控件(如BubbleChart
)的样式中定义的fontSize/fontFamily会在控件内部组件(如横轴/竖轴/标题)中得到体现。
chartSeriesStyles
我们还可以使用
chartSeriesStyles
属性来对不同的数据系列进行不同的渲染:
<?xml version="1.0"?>
<!-- charts/SeriesStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
ColumnChart {
chartSeriesStyles: PCCSeries1, PCCSeries2;
}
.PCCSeries1 {
fill: #CCFF66;
}
.PCCSeries2 {
fill: #CCFF99;
}
</mx:Style>
<mx:Script>
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month: "Jan", Profit: 2000, Expenses: 1500},
{Month: "Feb", Profit: 1000, Expenses: 200},
{Month: "Mar", Profit: 1500, Expenses: 500}
]);
</mx:Script>
<mx:Panel title="Setting Styles on Series">
<mx:ColumnChart id="column" dataProvider="{expenses}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="Month"
yField="Profit"
displayName="Profit"
/>
<mx:ColumnSeries
xField="Month"
yField="Expenses"
displayName="Expenses"
/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{column}"/>
</mx:Panel>
</mx:Application>
效果为:
chartSeriesStyles
属性接受一个字符串数组作为值,数组中的成员依次序对应数据series,而字符串的值则正好是class选择器的名称。
使用预定义的轴样式属性
我们可以使用以下Flex中预先定义好的轴样式属性来对图表中的X/Y轴进行渲染:
- horizontalAxisStyleName
- verticalAxisStyleName
厌倦了Flex图表中默认的X/Y轴的样子了吗?我们可以换一换:
<?xml version="1.0"?>
<!-- charts/PredefinedAxisStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
ColumnChart {
horizontalAxisStyleName:myAxisStyles;
verticalAxisStyleName:myAxisStyles;
}
.myAxisStyles {
tickPlacement:none;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1500},
{Month:"Feb", Profit:1000, Expenses:200},
{Month:"Mar", Profit:1500, Expenses:500}
]);
]]>
</mx:Script>
<mx:Panel title="Using Predefined Axis Styles">
<mx:ColumnChart id="column" dataProvider="{expenses}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="Month"
yField="Profit"
displayName="Profit"
/>
<mx:ColumnSeries
xField="Month"
yField="Expenses"
displayName="Expenses"
/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{column}"/>
</mx:Panel>
</mx:Application>
效果为: