Flex LineChart三部曲-样式篇

Flex的图表提供了非常好的基本功能，但其实大家最关注的还是图表的样式，在这里笔者简单介绍了一些样式的设置，让你的图表漂亮起来。

下面举一些例子，大家举一反三，试试各种属性，调出想要的效果

1.修改横轴样式
通过Chart的verticalAxisRenderers样式来设置横轴的Renderer，通过Renderer的各种属性来调整样式。

还是基于上一篇的代码，在其中新增Renderer部分，下面把完整的代码贴出来：

<mx:XMLList id="exampleData">
<object date="201011" val="213" val2="321"></object>
<object date="201012" val="123" val2="11"></object>
<object date="201013" val="4" val2="331"></object>
<object date="201014" val="555" val2="112"></object>
</mx:XMLList>

<mx:LineChart x="0" y="0" id="linechart1" width="100%" height="100%"
  dataProvider="{exampleData}"
  />
  <mx:horizontalAxis>
    <mx:CategoryAxis id="horiAxis" categoryField="@date"/>
  </mx:horizontalAxis>

  <mx:verticalAxis>
    <mx:LinearAxis id="vertAxis"  />
  </mx:verticalAxis>

  <mx:series>
    <mx:LineSeries yField="@val"  adjustedRadius="1"  form="seqment" displayName="数据A"/>
    <mx:LineSeries yField="@val2"  adjustedRadius="1"  form="seqment" displayName="数据B"/>
  </mx:series>

  <!-- 新增的Renderer -->
  <mx:horizontalAxisRenderers>
    <mx:AxisRenderer axis="{horiAxis}" labelAlign="center">
    <mx:axisStroke>
      <mx:Stroke weight="1"  color="#000000" caps="none"/>
    </mx:axisStroke>
    </mx:AxisRenderer>
  </mx:horizontalAxisRenderers>

</mx:LineChart>

可以看到，我们向LineChart的horizontalAxisRenderers样式中，放入了一个AxisRenderer对象，而通过设置它的labelAlign属性，将横轴每个点的标签居中显示，并在axisStroke样式中放了一个Stroke对象，这个就是很轴线条的样式

横轴已经由很粗的灰色线条，变成了黑色。

同理，我们将纵轴也改成这样：

<mx:verticalAxisRenderers>

<mx:AxisRenderer axis="{vertAxis}" placement="right">
  <mx:axisStroke>
    <mx:Stroke weight="1"  color="#000000" caps="none"/>
  </mx:axisStroke>
</mx:AxisRenderer>

</mx:verticalAxisRenderers>

其中placement是轴显示的位置，左边或右边，默认是左边。

２.背景样式

默认的背景，就是那些横条参考线，感觉并不是特别好看，大多数的图表，背景都是用网格的，这里可以通过backgroundElements属性来设置，给LineChart增加一段代码：

<mx:backgroundElements>

<mx:GridLines direction="both">
  <mx:horizontalStroke>
    <mx:Stroke weight="1" alpha=".1"/>
  </mx:horizontalStroke>
  <mx:horizontalFill>
    <mx:SolidColor color="#FFFFFF" alpha=".2"/>
  </mx:horizontalFill>
  <mx:verticalStroke>
    <mx:Stroke weight="1" alpha=".1"/>
  </mx:verticalStroke>
</mx:GridLines>

</mx:backgroundElements>

GridLines的direction就是控制背景的样式，有横向（horizontal），纵向（vertical），还有网格（both）
其实设置好这个属性为both，就会变成网格的样式，但不太好看，通过其内部的几个Stroke和SolidColor来控制线条样式和颜色，使得图表更加丰富

３.线条样式
线条样式同样可以个性定制，这里给出一个渐变线条的示例，大家可以调一调参数，看看效果来加强理解，具体到每个参数，可以参看API文档：

将原代码中的标记整体替换成如下代码：

<mx:series>
  <mx:LineSeries yField="@val"  adjustedRadius="2"  form="seqment" displayName="数据A">
    <mx:lineStroke>
      <mx:LinearGradientStroke weight="5" caps="square" spreadMethod="reflect">
        <mx:GradientEntry color="#ff9262" ratio=".3" alpha="1"/>
        <mx:GradientEntry color="#ffb359" ratio=".8" alpha="1"/>
      </mx:LinearGradientStroke>
    </mx:lineStroke>
  </mx:LineSeries>
  <mx:LineSeries yField="@val2"  adjustedRadius="1"  form="seqment" displayName="数据B">
    <mx:lineStroke>
      <mx:LinearGradientStroke weight="5" caps="square" spreadMethod="reflect">
        <mx:GradientEntry color="#a0c717" ratio=".3" alpha="1"/>
        <mx:GradientEntry color="#d2f45c" ratio=".8" alpha="1"/>
      </mx:LinearGradientStroke>
    </mx:lineStroke>
  </mx:LineSeries>
</mx:series>

修改后，还是两条LineSeries，但为其lineStroke样式设置了一个LinearGradientStroke对象，这个对象就是渐变的Stroke，通过GradientEntry对象来设置各渐变颜色值

４.修改Tip信息

一般的图表都需要查看每个点的具体信息，默认Flex的Chart已经帮我们实现了一个Tip，只是默认关闭的，这里通过LineChart的showDataTips属性开启，将代码修改如下：

<mx:LineChart x="0" y="0" id="linechart1" width="100%" height="100%"
  dataProvider="{exampleData}" showDataTips="true"
  > ...

默认样式已经不错，但有时需求可能会有固定信息格式，这个时候，我们可以为LineChart的dataTipFunction属性设置一个回调函数，来自定义显示的内容：

<mx:LineChart x="0" y="0" id="linechart1" width="100%" height="100%"
  dataProvider="{exampleData}" showDataTips="true"
  dataTipFunction="tipFormat"
  > ..

并添加这个函数，返回要显示的字符串：

<mx:Script>

<![CDATA[
import mx.charts.HitData;
import mx.charts.series.items.LineSeriesItem;

privatefunction tipFormat(e:HitData):String{
  var item:XML=XML(LineSeriesItem(e.chartItem).item);
  var rs:String=item.@date+"<br/><b><font COLOR='#FF00000'>"+item.@val
    +"</font></b>,<font COLOR='#445700'>"+item.@val2
    +"</font>";
  return rs;
}

]]>
</mx:Script>

从代码中可以看出，该函数的参数：e:HitData里面保存了这个点的数据，返回的格式是个HTML，这样灵活性很大。

有时，我们对Tip的要求还不止这些，甚至于要改动其样式，当然也可以，还是Renderer，LineChart的dataTipRenderer属性。

这里直接给出代码，就不过多解释了，实现原理大家自己看吧：

<mx:LineChart x="0" y="0" id="linechart1" width="100%" height="100%"
  dataProvider="{exampleData}" showDataTips="true"
  dataTipFunction="tipFormat"
  dataTipRenderer="{MyDataTip}"
  > ...

package
{

import flash.display.GradientType;
import flash.display.Graphics;
import flash.geom.Matrix;
import flash.text.TextField;

import mx.charts.chartClasses.DataTip;

publicclass MyDataTip extends DataTip
{
  privatevar myText:TextField;

  publicfunction MyDataTip() {
    super();
  }

  overrideprotectedfunction createChildren():void{
    super.createChildren();
    myText = new TextField();
  }

  overrideprotectedfunction updateDisplayList(w:Number, h:Number):void {
    super.updateDisplayList(w, h);
    if(data.hasOwnProperty('text')) {
      myText.text = data.text;
    } else {
      myText.text = data.toString();
    }

    var borderColor:uint=this.data.contextColor;
    this.setStyle("textAlign","center");
    var g:Graphics = graphics;
    g.clear();
    g.lineStyle(1,borderColor);
    var m:Matrix = new Matrix();
    m.createGradientBox(w+100,h,0,0,0);
    g.beginGradientFill(GradientType.LINEAR,[0xe6f5ff,0xFFFFFF],[.8,1],[0,255],m,null,null,0);
    g.drawRect(-50,0,w+100,h);
    g.endFill();
    g.lineStyle();
  }
}

}