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',?'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??id="__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:?'开支',?{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>