<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/15/displaying-grid-lines-in-a-flex-linechart-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.charts.renderers.CircleItemRenderer;
import mx.graphics.Stroke;
public function init():void{
series.setStyle("lineStroke", new Stroke(0x000000, 2, 0.4));
series.setStyle("fill", 0x000000);
series.setStyle("radius", 10);
series.setStyle("adjustedRadius", 2);
series.setStyle("itemRenderer", new ClassFactory(CircleItemRenderer));
}
]]>
</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" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="GridLines direction:">
<mx:ToggleButtonBar id="toggleButtonBar" selectedIndex="0">
<mx:dataProvider>
<mx:Array>
<mx:String>horizontal</mx:String>
<mx:String>vertical</mx:String>
<mx:String>both</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ToggleButtonBar>
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:LineChart id="lineChart"
showDataTips="true"
dataProvider="{dp}"
width="100%"
height="100%">
<mx:backgroundElements>
<mx:GridLines direction="{toggleButtonBar.dataProvider.getItemAt(toggleButtonBar.selectedIndex)}" />
</mx:backgroundElements>
<!-- 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 id="series" yField="@open" form="segment" displayName="Open" />
</mx:series>
</mx:LineChart>
</mx:Application>
<!-- http://blog.flexexamples.com/2007/11/15/displaying-grid-lines-in-a-flex-linechart-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.charts.renderers.CircleItemRenderer;
import mx.graphics.Stroke;
public function init():void{
series.setStyle("lineStroke", new Stroke(0x000000, 2, 0.4));
series.setStyle("fill", 0x000000);
series.setStyle("radius", 10);
series.setStyle("adjustedRadius", 2);
series.setStyle("itemRenderer", new ClassFactory(CircleItemRenderer));
}
]]>
</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" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="GridLines direction:">
<mx:ToggleButtonBar id="toggleButtonBar" selectedIndex="0">
<mx:dataProvider>
<mx:Array>
<mx:String>horizontal</mx:String>
<mx:String>vertical</mx:String>
<mx:String>both</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ToggleButtonBar>
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:LineChart id="lineChart"
showDataTips="true"
dataProvider="{dp}"
width="100%"
height="100%">
<mx:backgroundElements>
<mx:GridLines direction="{toggleButtonBar.dataProvider.getItemAt(toggleButtonBar.selectedIndex)}" />
</mx:backgroundElements>
<!-- 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 id="series" yField="@open" form="segment" displayName="Open" />
</mx:series>
</mx:LineChart>
</mx:Application>
mx.charts.renderers 类:
类 | 说明 | |
---|---|---|
AreaRenderer | 用于呈现 AreaSeries 对象的数据点下方区域的默认类。 | |
BoxItemRenderer | 用于填充矩形区域的简单图表 itemRenderer 实现。 | |
CandlestickItemRenderer | CandlestickSeries 对象的默认 itemRenderer。 | |
CircleItemRenderer | 用于填充椭圆区域的简单图表 itemRenderer 实现。 | |
CrossItemRenderer | 用于在其分配区域中进行交叉填充的简单图表 itemRenderer 实现。 | |
DiamondItemRenderer | 用于填充其分配区域中菱形的简单图表 itemRenderer 实现。 | |
HLOCItemRenderer | HLOCSeries 对象的默认项目渲染器。 | |
LineRenderer | 供 LineSeries 对象使用的线段渲染器的简单实现。 | |
ShadowBoxItemRenderer | 用于填充矩形区域并在其周围添加阴影的简单图表 itemRenderer 实现。 | |
ShadowLineRenderer | 供 LineSeries 对象使用的线段渲染器实现。 | |
TriangleItemRenderer | 用于填充其分配区域中直角三角形的简单图表 itemRenderer 实现。 | |
WedgeItemRenderer | PieSeries 对象的默认 itemRenderer。 |