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>  

效果为：