flex - lineChart

带曲线阴影

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2007/11/13/removing-the-default-drop-shadow-from-a-linechart-chart-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <!--[CDATA[ private function init(evt:Event):void { var chart:LineChart = evt.currentTarget as LineChart; seriesFilterArr = chart.seriesFilters; } private function checkBox_click(evt:MouseEvent):void { var len:uint = lineChart.seriesFilters.length; if (len > 0) { lineChart.seriesFilters = []; } else { lineChart.seriesFilters = seriesFilterArr; } } ]]--> </mx:Script> <mx:XMLListCollection id="dp"> <mx:source> <mx:XMLList> <quote date="8/27/2007" open="40.38" close="40.81" /> <quote date="8/24/2007" open="40.5" close="40.41" /> <quote date="8/23/2007" open="40.82" close="40.6" /> <quote date="8/22/2007" open="40.4" close="40.77" /> <quote date="8/21/2007" open="40.41" close="40.13" /> <quote date="8/20/2007" open="40.55" close="40.74" /> <quote date="8/17/2007" open="40.18" close="40.32" /> <quote date="8/16/2007" open="39.83" close="39.96" /> <quote date="8/15/2007" open="40.22" close="40.18" /> <quote date="8/14/2007" open="41.01" close="40.41" /> <quote date="8/13/2007" open="41" close="40.83" /> <quote date="8/10/2007" open="41.3" close="41.06" /> <quote date="8/9/2007" open="39.9" close="40.75" /> <quote date="8/8/2007" open="39.61" close="40.23" /> <quote date="8/7/2007" open="39.08" close="39.42" /> <quote date="8/6/2007" open="38.71" close="39.38" /> <quote date="8/3/2007" open="39.47" close="38.75" /> <quote date="8/2/2007" open="39.4" close="39.52" /> <quote date="8/1/2007" open="40.29" close="39.58" /> </mx:XMLList> </mx:source> </mx:XMLListCollection> <mx:Array id="seriesFilterArr" /> <mx:ApplicationControlBar dock="true"> <mx:CheckBox id="checkBox" label="toggle series filters:" labelPlacement="left" click="checkBox_click(event);" /> </mx:ApplicationControlBar> <mx:LineChart id="lineChart" showDataTips="true" dataProvider="{dp}" width="100%" height="100%" creationComplete="init(event);"> <!-- vertical axis --> <mx:verticalAxis> <mx:LinearAxis baseAtZero="false" title="Price" /> </mx:verticalAxis> <!-- horizontal axis --> <mx:horizontalAxis> <mx:CategoryAxis id="ca" categoryField="@date" title="Date" /> </mx:horizontalAxis> <!-- horizontal axis renderer --> <mx:horizontalAxisRenderers> <mx:AxisRenderer axis="{ca}" canDropLabels="true" /> </mx:horizontalAxisRenderers> <!-- series --> <mx:series> <mx:LineSeries yField="@close" form="curve" displayName="Close" /> <mx:LineSeries yField="@open" form="curve" displayName="Open" /> </mx:series> </mx:LineChart> </mx:Application>

 

隐藏

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; [Bindable] private var medalsAC:ArrayCollection = new ArrayCollection( [ { Country: "USA", Gold: 35, Silver:39,Bronze:66,Bronze1:44 }, { Country: "China", Gold: 32, Silver:17,Bronze:47,Bronze1:97 }, { Country: "Russia", Gold: 27, Silver:27,Bronze:33,Bronze1:45 } ]); private function leftclick(event:MouseEvent):void{ first1.visible=!first1.visible; first2.visible=!first2.visible; first3.visible=!first3.visible; } private function rightclick(event:MouseEvent):void{ second1.visible=!second1.visible; second2.visible=!second2.visible; second3.visible=!second3.visible; } ]]--> </mx:Script> <mx:LineChart id="LineChart" dataProvider="{medalsAC}" showDataTips="true" width="500" height="300" y="58" x="0"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="Country" /> </mx:horizontalAxis> <mx:series> <mx:LineSeries id="first1" verticalAxis="{firstVAxis}" displayName="左边1" yField="Gold" itemRenderer="mx.charts.renderers.CircleItemRenderer"> </mx:LineSeries> <mx:LineSeries id="first2" verticalAxis="{firstVAxis}" yField="Silver" displayName="左边2" itemRenderer="mx.charts.renderers.CircleItemRenderer"> </mx:LineSeries> <mx:LineSeries id="second1" verticalAxis="{secondVAxis}" yField="Bronze" displayName="右边1" itemRenderer="mx.charts.renderers.CircleItemRenderer"> </mx:LineSeries> <mx:LineSeries id="second2" verticalAxis="{secondVAxis}" yField="Bronze1" displayName="右边2" itemRenderer="mx.charts.renderers.CircleItemRenderer"> </mx:LineSeries> </mx:series> <mx:verticalAxisRenderers> <mx:AxisRenderer placement="left" color="#FF0000" id="first3" > <mx:axis> <mx:LinearAxis title="" baseAtZero="true" id="firstVAxis"/> </mx:axis> </mx:AxisRenderer> <mx:AxisRenderer placement="right" color="#FFFF00" id="second3"> <mx:axis> <mx:LinearAxis title="" baseAtZero="true" id="secondVAxis"/> </mx:axis> </mx:AxisRenderer> </mx:verticalAxisRenderers> </mx:LineChart> <mx:Button x="286" y="448" label="隐藏左边" click="leftclick(event)" fontSize="12"/> <mx:Button x="396" y="448" label="隐藏右边" click="rightclick(event)" fontSize="12"/> </mx:Application>

普通

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <!--ActionScript--> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; [Bindable] //数组:expenses public var expenses:ArrayCollection=new ArrayCollection ([ {Month: "Jan", Profit: 500, Expenses: 400, Amount: 45 }, {Month: "Feb", Profit: 400, Expenses: 200, Amount: 60 }, {Month: "Mar", Profit: 600, Expenses: 300, Amount: 30 }, {Month: "Apr", Profit: 800, Expenses: 400, Amount: 90}, {Month: "May", Profit: 900, Expenses: 400, Amount: 90}, {Month: "Jun", Profit: 1100, Expenses: 1000, Amount: 100} ]); ]]--> </mx:Script> <!--Panel--> <mx:Panel title="fifi" height="100%" width="100%" layout="horizontal" fontSize="12"> <!--LineChart(showDataTips:自动提示tip)--> <mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true"> <!--categoryField：指定包含标签文本的数据提供程序的字段--> <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/> </mx:horizontalAxis> <!--yField:纵坐标数据节点--> <mx:series> <mx:LineSeries yField="Profit" displayName="收益"/> <mx:LineSeries yField="Expenses" displayName="开销"/> <mx:LineSeries yField="Amount" displayName="数量"/> </mx:series> </mx:LineChart> <!--Legend:一个图形标记和一个文本标签--> <mx:Legend dataProvider="{myChart}"/> </mx:Panel> </mx:Application>