[转]Flex Formatting Charts Applying chart styles

 本文转自：http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf65816-7fff.html

• Applying styles with CSS

  • Applying CSS to chart controls

  • Applying different styles to each series

  • Using predefined axis style properties

  • Using class selectors for axis styles

• Applying styles inline

• Applying styles by binding tag definitions

• Using ChartElement objects

You can apply style properties to charts by using CSS or inline syntax. You can also apply styles to chart elements by using binding.

Applying styles with CSS

You can apply styles to charting components with CSS definitions. You can set chart properties such as fonts and tick marks, or series properties, such as the fills of the boxes in a ColumnChart.

A limitation of using CSS to style your charts is that the styleable chart properties often use compound values, such as strokes and gradient fills, that cannot be expressed by using CSS. The result is that you cannot express all values of chart styles by using CSS syntax.

To determine if an object’s properties can be styled by using CSS, check to see if the class or its parent implements the IStyleClient interface. If it does, then you can set the values of the object’s style properties with CSS. If it does not, then the class does not participate in the styles subsystem and you therefore cannot set its properties with CSS. In that case, the properties are public properties of the class and not style properties. You can apply properties with CSS by using pre-defined styles for some classes, such as the verticalAxisStyleName and horizontalAxisStyleName. For more information, see Using predefined axis style properties.

Applying CSS to chart controls

You can use the control name in CSS to define styles for that control. This is referred to as a type selector, because the style you define is applied to all controls of that type. For example, the following style definition specifies the font for all BubbleChart controls:

<?xml version="1.0"?>
<!-- charts/BubbleStyles.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

    <fx:Style>
     @namespace mx "library://ns.adobe.com/flex/mx";
     
     mx|BubbleChart {
         fontFamily:Arial;
         fontSize:15;
         color:#FF0033;
      }
    </fx:Style>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Bubble Chart">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:BubbleChart id="myChart" 
        minRadius="1" 
        maxRadius="50" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true">
        <mx:series>
           <mx:BubbleSeries 
                xField="profit" 
                yField="expenses" 
                radiusField="amount" 
                displayName="Profit"/>
        </mx:series>
     </mx:BubbleChart>
     <mx:Legend dataProvider="{myChart}"/>
  </s:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:

Some styles, such as fontSize and fontFamily, are inheritable, which means that if you set them on the chart control, the axes labels, titles, and other text elements on the chart inherit those settings. To determine whether a style is inheritable, see that style’s description in ActionScript 3.0 Reference for the Adobe Flash Platform.

Axis labels appear next to the tick marks along the chart’s axis. Titles appear parallel to the axis line. By default, the text on an axis uses the text styles of the chart control.

Axis elements use whatever styles are set on the chart control’s type or class selector, but you can also specify different styles for each axis by using a class selector on the axis renderer or predefined axis style properties.

Applying different styles to each series

To apply different styles to each series in the charts with CSS, you use the chartSeriesStyles property. This property takes an Array of Strings. Each String specifies the name of a class selector in the style sheet. Flex applies each of these class selectors to a series.

To apply CSS to a series, you define a type or class selector for the chart that defines the chartSeriesStyles property. You then define each class selector named in the chartSeriesStyles property.

Essentially, you are defining a new style for each series in your chart. For example, if you have a ColumnChart control with two series, you can apply a different style to each series without having to explicitly set the styles on each series.

The following example defines the colors for two series in the ColumnChart control:

<?xml version="1.0"?> 
<!-- charts/SeriesStyles.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
 
    <fx:Declarations> 
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/> 
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations> 
 
  <fx:Style> 
     @namespace mx "library://ns.adobe.com/flex/mx"; 
 
     mx|ColumnChart { 
        chartSeriesStyles: PCCSeries1, PCCSeries2; 
     } 
     .PCCSeries1 { 
        fill: #CCFF66; 
     } 
     .PCCSeries2 { 
        fill: #CCFF99; 
     } 
  </fx:Style> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Setting Styles on Series"> 
     <s:layout> 
         <s:VerticalLayout/> 
     </s:layout> 
     <mx:ColumnChart id="column" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true"> 
        <mx:horizontalAxis> 
           <mx:CategoryAxis 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}"/> 
  </s:Panel> 
</s:Application>

Flex sets the styleName property of each series to the corresponding selector in the chartSeriesStyles Array. You do not have to explicitly set styles for each series. If you have more series than available chartSeriesStyles selectors, the chart begins again with the first style.

If you manually set the value of the styleName property on a particular series, that style takes priority over the styles that the chartSeriesStyles property specifies.

For PieChart controls, you can define the fills property of the series. The PieChart applies the values in this Array to the pie wedges. It starts with the first value if there are more wedges than values defined in the Array. The following example creates a PieChart that uses a spectrum of reds for the wedges:

<?xml version="1.0"?> 
<!-- charts/PieWedgeFills.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
 
    <fx:Declarations> 
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/budget-xml.aspx"/> 
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/budget.aspx -->  
    </fx:Declarations> 
 
  <fx:Style> 
     @namespace mx "library://ns.adobe.com/flex/mx"; 
     
     mx|PieSeries { 
         fills:#FF0000, #FF3333, #FF6666, #FF9999, #FFAAAA, #FFCCCC; 
      } 
  </fx:Style> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Setting Pie Wedge Fills with CSS"> 
     <s:layout> 
         <s:VerticalLayout/> 
     </s:layout> 
     <mx:PieChart id="pie" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true"> 
        <mx:series> 
           <mx:PieSeries 
                field="amount" 
                nameField="item" 
                labelPosition="callout"/> 
        </mx:series> 
     </mx:PieChart> 
     <mx:Legend dataProvider="{pie}"/> 
  </s:Panel> 
</s:Application>

Using predefined axis style properties

The following predefined class selectors are available for axis styles:

• horizontalAxisStyleName

• verticalAxisStyleName

Flex applies each style to the corresponding axis.

In addition to these, the following two class selectors define an array of class selectors that define the style properties for the axes:

• horizontalAxisStyleNames

• verticalAxisStyleNames

In this case, Flex loops through the selectors and applies them to the axis renderers that correspond to their position in the Array.

In addition to these class selectors for the axis style properties, you can use the axisTitleStyleName and gridLinesStyleName class selectors to apply styles to axis titles and grid lines.

The following example removes tick marks from the horizontal axis:

<?xml version="1.0"?>
<!-- charts/PredefinedAxisStyles.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

  <fx:Style>
     @namespace mx "library://ns.adobe.com/flex/mx";
     
     mx|ColumnChart {
        horizontalAxisStyleName:myAxisStyles;
        verticalAxisStyleName:myAxisStyles;
     }

     .myAxisStyles {
        tickPlacement:none;
     }
  </fx:Style>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:Panel title="Using Predefined Axis Styles">
     <s:layout>
         <s:VerticalLayout/>
     </s:layout>
     <mx:ColumnChart id="column" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis 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}"/>
  </s:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:

Using class selectors for axis styles

To use a class selector to define styles for axis elements, define the custom class selector in an <fx:Style> block or external style sheet, and then use the styleName property of the AxisRenderer class to point to that class selector. Note that any time you want to use an AxisRenderer, you must explicitly set the axis to which it is applied with the renderer’s axis property.

The following example defines the MyStyle style and applies that style to the elements on the horizontal axis:

<?xml version="1.0"?>
<!-- charts/AxisClassSelectors.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

  <fx:Declarations>
     <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
     <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
     <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
  </fx:Declarations>

    <fx:Style>
        .myStyle {
            fontSize:9;
            color:red;            
        }
    </fx:Style>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="AxisRenderer Class Selectors example">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="column" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true">
        <mx:horizontalAxisRenderers>
           <mx:AxisRenderer 
                axis="{a1}"
                styleName="myStyle"/>
        </mx:horizontalAxisRenderers>

        <mx:horizontalAxis>
           <mx:CategoryAxis id="a1" 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}"/>
  </s:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:

Most charting-specific style properties are not inheritable, which means that if you set the property on a parent object, the child object does not inherit its value.

For more information on using CSS, see About styles.

Applying styles inline

You can set many styleable elements of a chart as attributes of the MXML tag. For example, to set the styleable properties of an axis, you can use the <mx:AxisRenderer> tag rather than define a new style in CSS.

The following example sets the fontSize property of the horizontal axis to 7:

<mx:horizontalAxisRenderers> 
    <mx:AxisRenderer fontSize="7" axis="{h1}"/> 
</mx:horizontalAxisRenderers>

Notice that any time you want to use an AxisRenderer, you must explicitly set the axis to which it is applied with the renderer’s axis property.

You can also access the properties of renderers in ActionScript so that you can change their appearance at run time. For additional information about axis renderers, see Working with axes.

Applying styles by binding tag definitions

You can define styles with MXML tags. You can then bind the values of the renderer properties to those tags. The following example defines the weight and color of the strokes, and then applies those strokes to the chart’s AxisRenderer class:

<?xml version="1.0"?>
<!-- charts/BindStyleValues.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
      <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
      <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/stocks-xml.aspx"/>
      <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/stocks.aspx -->  

      <mx:SolidColorStroke color="0x00FF00" weight="2" id="axis"/>
      <mx:SolidColorStroke color="0xFF0000" weight="1" id="ticks"/>
      <mx:SolidColorStroke color="0x0000FF" weight="1" id="mticks"/>
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="HLOC Chart">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
      <mx:HLOCChart id="mychart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true">
         <mx:horizontalAxisRenderers>
            <mx:AxisRenderer
                axis="{a1}"
                axisStroke="{axis}" 
                placement="bottom"
                minorTickPlacement="inside" 
                minorTickLength="2" 
                tickLength="5"
                tickPlacement="inside">
               <mx:tickStroke>{ticks}</mx:tickStroke>
               <mx:minorTickStroke>{mticks}</mx:minorTickStroke>
            </mx:AxisRenderer>
         </mx:horizontalAxisRenderers>

         <mx:verticalAxis>
            <mx:LinearAxis id="a1" 
                minimum="30" 
                maximum="50"/>
         </mx:verticalAxis>
         <mx:series>
            <mx:HLOCSeries 
                openField="open"
                highField="high" 
                lowField="low" 
                closeField="close"
                displayName="FRED">
            </mx:HLOCSeries>
         </mx:series>
      </mx:HLOCChart>
      <mx:Legend dataProvider="{mychart}"/>
  </s:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:

Using ChartElement objects

The ChartElement class is the base class for anything that appears in the data area of the chart. All series objects (such as GridLines objects) are ChartElement objects. You can add ChartElement objects (such as images, grid lines, and strokes) to your charts by using the backgroundElements and annotationElements properties of the chart classes.

The backgroundElements property specifies an Array of ChartElement objects that appear beneath any data series rendered by the chart. The annotationElements property specifies an Array of ChartElement objects that appears above any data series rendered by the chart.

The ChartElement objects that you can add to a chart include supported image files, such as GIF, PNG, and JPEG.

The following example adds new grid lines as annotation elements to the chart and an image as the background element. When the user clicks the button, the annotation elements change:

<?xml version="1.0"?>
<!-- charts/AnnotationElements.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <fx:Script><![CDATA[
      import mx.graphics.SolidColor;
      import mx.charts.GridLines;

      [Embed(source="../assets/butterfly.gif")]
      public var butterfly:Class;

      public function updateGridLines():void {
         var bgi:GridLines = new GridLines();

         var s:SolidColorStroke = new SolidColorStroke(0xff00ff, 3);
         bgi.setStyle("horizontalStroke",s);

         var c:SolidColor = new SolidColor(0x990033, .2);
         bgi.setStyle("horizontalFill",c);

         var c2:SolidColor = new SolidColor(0x999933, .2);
         bgi.setStyle("horizontalAlternateFill",c2);

         myChart.annotationElements = [bgi]

         var b:Object = new butterfly();
         b.alpha = .2;
         b.height = 150;
         b.width = 150;

         myChart.backgroundElements = [ b ];
      }
  ]]></fx:Script>
  <s:Panel title="Annotation Elements Example">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis 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:annotationElements>
           <mx:GridLines>
            <mx:horizontalStroke>
                <mx:SolidColorStroke 
                    color="#191970" 
                    weight="2" 
                    alpha=".3"/>
            </mx:horizontalStroke>
           </mx:GridLines>
        </mx:annotationElements>

        <mx:backgroundElements>
           <s:Image 
                source="@Embed('../assets/butterfly.gif')" 
                alpha=".2"/>
        </mx:backgroundElements>

     </mx:ColumnChart>
     <!--
     <mx:Legend dataProvider="{myChart}"/>
     -->
  </s:Panel>
  <s:Button id="b1" 
    click="updateGridLines()" 
    label="Update Grid Lines"/>
</s:Application>
The executing SWF file for the previous example is shown below:

In ActionScript, you can add an image to the chart and manipulate its properties, as the following example shows:

<?xml version="1.0"?>
<!-- charts/BackgroundElementsWithActionScript.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send();addButterfly()"
    height="600">

  <fx:Declarations>
     <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
     <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
     <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
  </fx:Declarations>

  <fx:Script><![CDATA[
      import mx.collections.ArrayCollection;
      import mx.graphics.SolidColor;
      import mx.charts.GridLines;
      import mx.charts.ColumnChart;

      [Embed(source="../assets/butterfly.gif")]
      public var butterfly:Class;

      public function addButterfly():void {
         var b:Object = new butterfly();
         b.alpha = .2;
         myChart.backgroundElements = [ b ];
      }
  ]]></fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Background Elements with ActionScript">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="myChart" dataProvider="{srv.lastResult.data.result}" showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis 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="{myChart}"/>
  </s:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:

For more information on working with grid lines, see Using chart grid lines.

You can also add data graphics to your charts by adding the CartesianDataCanvas and PolarDataCanvas controls to your background or annotation elements Arrays. For more information, see Drawing on chart controls.