2012-03-09 14:26 LineChart实现双Y坐标

效果图：


LineChart文件内容：

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup gap="0" 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="400" height="300">
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.collections.ArrayCollection;

import spark.components.CheckBox;

public static const VERTICALAXISLEFT:String = 'verticalAxisLeft';
public static const VERTICALAXISRIGHT:String = 'verticalAxisRight';
[Bindable]
/* 数据源 */
private var _dataProvider:ArrayCollection;
[Bindable]
/* 水平轴上的绑定字段 ，默认空*/
private var _categoryField:String = '';
[Bindable]
/* 水平轴上的标题 ，默认空*/
private var _title:String = '';
[Bindable]
/* 是否显示左边的刻度线，默认true */
private var _calibrationLeft:Boolean = true;
[Bindable]
/* 是否显示右边的刻度线，默认false */
private var _calibrationRight:Boolean = false;
[Bindable]
/* 在垂直轴上显示的内容，可多个 ，格式 {yField:'字段',displayName:'提示标题',align:}*/
private var _lineSeriesArray:Array;

public function set dataProvider(value:ArrayCollection):void {
_dataProvider = value;
}

public function set categoryField(value:String):void {
_categoryField = value;
}

public function set title(value:String):void {
_title = value;
}

public function set calibrationRight(value:Boolean):void {
_calibrationRight = value;
}

public function set calibrationLeft(value:Boolean):void {
_calibrationLeft = value;
}

public function set lineSeriesArray(value:Array):void {
_lineSeriesArray = value;
if (_lineSeriesArray) {
var check:CheckBox;
var target:mx.charts.LineChart = mx.charts.LineChart(this.getChildAt(1));
colorList.removeAll();
while (_lineSeriesArray.length > 0) {
var item:Object = _lineSeriesArray.pop();
var series:LineSeries = new LineSeries;
series.horizontalAxis = h1;
series.yField = item.yField;
series.displayName = item.displayName;
if (item.align == VERTICALAXISLEFT) {
series.verticalAxis = v1;
} else if (item.align == VERTICALAXISRIGHT) {
series.verticalAxis = v2;
}
var storkt:SolidColorStroke = new SolidColorStroke();
//随机生成颜色colorArr[i]
storkt.color = bulidColor();
storkt.weight = 1;
series.setStyle("lineStroke", storkt);
target.series.push(series);
target.series = target.series;

check = new CheckBox;
check.setStyle('color', storkt.color);
check.label = item.displayName;
check.selected = true;
tools.addElement(check);

BindingUtils.bindProperty(series, 'visible', check, 'selected');
BindingUtils.bindProperty(series, 'includeInLayout', check, 'selected');
}
}
}

private var source:Array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F'];

private var colorList:ArrayCollection = new ArrayCollection;

private function bulidColor():uint {
var color:String = '0x';
var index:Number;
for (var i:int = 0; i < 6; i++) {
//0-15之间的随机数，不包含15
index = Math.round(Math.random() * 15);
color += source[index];
}
if (colorList.contains(color)) {
bulidColor();
} else {
colorList.addItem(color);
}
return mx.core.Singleton.getInstance("mx.styles::IStyleManager2").getColorName(color);
}
]]>
</fx:Script>
<s:HGroup id="tools" gap="15" width="100%" horizontalAlign="center" verticalAlign="middle" height="30"/>
<mx:LineChart seriesFilters="[]" dataProvider="{_dataProvider}" showDataTips="true" width="100%" height="100%">
<!--backgroundElements:背景设置-->
<mx:backgroundElements>
<mx:GridLines horizontalTickAligned="false" verticalTickAligned="false">
<mx:verticalStroke>
<mx:SolidColorStroke id="ss" color="#a6cecd" weight="1" alpha="0.4"/>
</mx:verticalStroke>
<mx:horizontalStroke>
<mx:SolidColorStroke color="#a6cecd" weight="1" alpha="0.6"/>
</mx:horizontalStroke>
</mx:GridLines>
</mx:backgroundElements>

<!--categoryField：横坐标数据节点-->
<mx:horizontalAxis>
<mx:CategoryAxis id="h1" categoryField="{_categoryField}" title="{_title}"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer placement="bottom" axis="{h1}"/>
</mx:horizontalAxisRenderers>

<!--纵坐标-->
<mx:verticalAxisRenderers>
<mx:AxisRenderer axisStroke="{ss}" placement="left" axis="{v1}" visible="{_calibrationLeft}"
includeInLayout="{_calibrationLeft}"/>
<mx:AxisRenderer axisStroke="{ss}" placement="right" axis="{v2}" visible="{_calibrationRight}"
includeInLayout="{_calibrationRight}"/>
</mx:verticalAxisRenderers>

<mx:series>
<!--纵坐标轴1-->
<mx:LineSeries id="w__sasfw" horizontalAxis="{h1}" visible="false" includeInLayout="false">
<mx:verticalAxis>
<mx:LinearAxis id="v1" title=""/>
</mx:verticalAxis>
</mx:LineSeries>
<!--纵坐标轴2-->
<mx:LineSeries horizontalAxis="{h1}" visible="false" includeInLayout="false">
<mx:verticalAxis>
<mx:LinearAxis id="v2" title=""/>
</mx:verticalAxis>
</mx:LineSeries>
</mx:series>
</mx:LineChart>
</s:VGroup>



测试文件内容：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:charts="com.charts.*">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;

[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection([{Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450}, {Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600}, {Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300}, {Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900}, {Month: "May", Profit: 2400, Expenses: 575, Amount: 500}]);

override protected function createChildren():void {
addEventListener(FlexEvent.APPLICATION_COMPLETE, function(e:FlexEvent):void {
var source:Array = [{yField: 'Profit', displayName: '利润', align: LineChart.VERTICALAXISLEFT}, {yField: 'Expenses', displayName: '开支', align: LineChart.VERTICALAXISLEFT}, {yField: 'Amount', displayName: '金额', align: LineChart.VERTICALAXISRIGHT}];
chart.lineSeriesArray = source;
});
super.createChildren();
}
]]>
</fx:Script>
<!-- Define custom colors for use as fills in the AreaChart control. -->
<charts:LineChart id="chart" width="100%" height="100%" calibrationRight="true" dataProvider="{expensesAC}" categoryField="Month"
title="这是测试，可以改啊"/>
</s:Application>