0 Replies Latest reply on Sep 19, 2011 12:45 AM by aaronhhe

    How to set the font of label in ColumnChart correctly?

    aaronhhe

      hello, everybody

       

      By flex sdk 4.1.0, 4.5.1,

      the same source but two effects of font of label of ColumnChart will be displayed.

       

      .mxml:

      <!-- mxml start -->

      <?xml version="1.0" encoding="utf-8"?>

      <s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark"

                         xmlns:mx="library://ns.adobe.com/flex/mx"

                         width="100%" height="100%"

                         styleName="backgroundChart" xmlns:local="*" xmlns:common="common.*">

      ...   

          <fx:Declarations>

              <s:SolidColorStroke id="white" weight="1" color="#CCCCCC"/>

          </fx:Declarations>

       

          <s:Label text="" id="titleLabel" textAlign="left" styleName="graphLabel" x="10" y="10" width="100%" height="40" visible="true"/>

          <mx:Legend id="ch01Legend" direction="horizontal" dataProvider="{mainChart}" height="100%" width="100%" x="30" y="30" styleName="myLegend1"/>

       

          <!-- Define custom Strokes. -->

          <mx:ColumnChart id="mainChart" showDataTips="true" x="20" y="60" width="100%" height="100%" dataTipFunction="dataTip">

              <mx:backgroundElements>

                  <mx:GridLines horizontalChangeCount="1" gridDirection="horizontal">

                      <mx:horizontalStroke>{white}</mx:horizontalStroke>

                  </mx:GridLines>

              </mx:backgroundElements>

              <mx:verticalAxisRenderers>

                  <mx:AxisRenderer axis="{linearAxis}" showLine="true" showLabels="true" styleName="myAxisStyle1">

                      <mx:axisStroke>{white}</mx:axisStroke>

                  </mx:AxisRenderer>

              </mx:verticalAxisRenderers>

              <mx:verticalAxis>

                  <mx:LinearAxis id="linearAxis"

                                 minimum="0"

                                 autoAdjust="true"

                                 title="Unit"

                                 />

              </mx:verticalAxis>

       

              <mx:horizontalAxisRenderers>

                  <mx:AxisRenderer id="horizonLabel" labelRotation="45" axis="{ch01_a2}" showLine="true" showLabels="true" styleName="myAxisStyle3">

                      <mx:axisStroke>{white}</mx:axisStroke>

                  </mx:AxisRenderer>

              </mx:horizontalAxisRenderers>

              <mx:horizontalAxis>

                  <mx:CategoryAxis id="ch01_a2"

                                   dataProvider="{mainChart}"

                                   title="Period"

                                   categoryField="Period"

                                   />               

              </mx:horizontalAxis>

          </mx:ColumnChart>

      </s:BorderContainer>

      <!-- mxml end -->

       

      .css

      <!-- css start -->

      .myAxisStyle1 {

          placement:bottom;

          minorTickPlacement:none;

          tickLength:5;

          tickPlacement:none;

          color:#FFFFFF;

          verticalAxisTitleAlignment:vertical;

          fontFamily: Arial_AFE;

      }

       

      .myAxisStyle3 {

          placement:bottom;

          minorTickPlacement:inside;

          tickLength:5;

          tickPlacement:inside;

          color:#FFFFFF;

          fontFamily: Arial_AFE;

      }

       

      @font-face {

          src:url("font/arial.ttf");

          fontFamily: Arial_AFE;

          embedAsCFF: false;

      }

      <!-- css end -->

       

       

      environment:

      flex sdks->4.1.0

      chart image:

      4.1.0.PNG

      the font looks like "Arial"

       

       

      environment:

      flex sdks->4.5.1

      chart image:

      4.5.1.PNG

      the font looks like "Times New Roman"

       

       

      Working at flex sdks 4.5.1,

      the labelClass can be set to 'spark.components.Label'(defalut) or 'mx.controls.Label',

      it seems that we can set labelClass to mx.controls.Label to get the same effect of font of label in ColumnChart when flex sdks->4.5.1

                  <mx:AxisRenderer axis="{linearAxis}" showLine="true" showLabels="true" styleName="myAxisStyle1" labelClass="mx.controls.Label">

                  <mx:AxisRenderer id="horizonLabel" labelRotation="45" axis="{ch01_a2}" showLine="true" showLabels="true" styleName="myAxisStyle3" labelClass="mx.controls.Label">

      but it also causes a memory leak.

       

      1) Can anyone tell me how to show the font of label of ColumnChart correctly (looks like "Arial") when using the labelClass 'spark.components.Label' ?

      2) Can anyone tell me how to solve the memory leak when using the labelClass 'mx.controls.Label'?