16.1.创建一个图表
16.1.1. 问题
我想在程序中添加一个图表。
16.1.2. 解决办法
首先要创建目标类型的图表，然后为该类型的图表添加一个合适的CharSeries 对象，最后为该图表绑定数据提供器(dataProvider)。
16.1.3. 讨论
图表有多种类型，在使用之前必须清楚工具箱中有哪些图表可供调用。
每一种图表都有一个ChartSeries 对象与之对应。要将数据显式地表示为某个特定的图表，就要先添加对应的数列类型然后绑定到一个数据提供器上。ChartSeries 对象定义了在图表的x 轴和y 轴上显示何种数据以及数据列的名称。数据列名称可以添加滤镜来显示，包括阴影模糊或者发光的效果。
根据数据的不同格式，你可能需要自定义一个横向或纵向的坐标。如果数据是一个集合，如日期、国家、人，你就需要使用类坐标(CategoryAxis)。如果数据是单纯的数字，就要使用线性坐标(LinearAxis)。
图表的数据提供器可以是一个数组或多个类的集合，也可以是XMLList 对象。如果你要在图表标签上设置一个数据提供器，那么数据列对象就会继承这个数据提供器，或者你可以选择为每个数据列对象单独地指定一个数据提供器。不同的数据列可以使用不同的数据提供器。一个图表不需要使用数据提供器里面的所有数据，可以只使用指定的部分数据。
可以用与以下代码创建条状图和饼状图：
柱状图和HighLowOpenClose 图表则需要一些不同类型的数据集合：
我想在程序中添加一个图表。
16.1.2. 解决办法
首先要创建目标类型的图表，然后为该类型的图表添加一个合适的CharSeries 对象，最后为该图表绑定数据提供器(dataProvider)。
16.1.3. 讨论
图表有多种类型，在使用之前必须清楚工具箱中有哪些图表可供调用。
每一种图表都有一个ChartSeries 对象与之对应。要将数据显式地表示为某个特定的图表，就要先添加对应的数列类型然后绑定到一个数据提供器上。ChartSeries 对象定义了在图表的x 轴和y 轴上显示何种数据以及数据列的名称。数据列名称可以添加滤镜来显示，包括阴影模糊或者发光的效果。
根据数据的不同格式，你可能需要自定义一个横向或纵向的坐标。如果数据是一个集合，如日期、国家、人，你就需要使用类坐标(CategoryAxis)。如果数据是单纯的数字，就要使用线性坐标(LinearAxis)。
图表的数据提供器可以是一个数组或多个类的集合，也可以是XMLList 对象。如果你要在图表标签上设置一个数据提供器，那么数据列对象就会继承这个数据提供器，或者你可以选择为每个数据列对象单独地指定一个数据提供器。不同的数据列可以使用不同的数据提供器。一个图表不需要使用数据提供器里面的所有数据，可以只使用指定的部分数据。
可以用与以下代码创建条状图和饼状图：
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" backgroundColor="0xFFFFFF">
<mx:Script>
<![CDATA[
// a basic data set
[Bindable] public var chartDP:Array = [
{day:'Monday',rainfall:10,elevation:100,temperature:78},
{day:'Tuesday',rainfall:7,elevation:220,temperature:66},
{day:'Wednesday',rainfall:5,elevation:540,temperature:55},
{day:'Thursday',rainfall:8,elevation:60,temperature:84},
{day:'Friday',rainfall:11,elevation:390,temperature:52},
{day:'Saturday',rainfall:12,elevation:790,temperature:45},
{day:'Sunday',rainfall:14,elevation:1220,temperature:24}
];
]]>
</mx:Script>
<mx:ToggleButtonBar dataProvider="{simpleCharts}"
direction="vertical" />
<mx:ViewStack id="simpleCharts" >
<mx:Canvas label="Bar">
<mx:BarChart dataProvider="{chartDP}" >
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{chartDP}"
categoryField="day" />
</mx:verticalAxis>
<mx:series>
<!-- bar chart uses a BarSeries -->
<mx:BarSeries
yField="day" xField="rainfall"
displayName="day" />
</mx:series>
</mx:BarChart>
</mx:Canvas>
<mx:Canvas label="Pie">
<mx:PieChart dataProvider="{chartDP}" >
<!-- no axes need to be defined in a pie chart -->
<mx:series>
<!-- pie chart uses a pie series -->
<mx:PieSeries
field="rainfall"
nameField="day"
labelPosition="callout"
displayName="rainfall" />
</mx:series>
</mx:PieChart>
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
layout="horizontal" backgroundColor="0xFFFFFF">
<mx:Script>
<![CDATA[
// a basic data set
[Bindable] public var chartDP:Array = [
{day:'Monday',rainfall:10,elevation:100,temperature:78},
{day:'Tuesday',rainfall:7,elevation:220,temperature:66},
{day:'Wednesday',rainfall:5,elevation:540,temperature:55},
{day:'Thursday',rainfall:8,elevation:60,temperature:84},
{day:'Friday',rainfall:11,elevation:390,temperature:52},
{day:'Saturday',rainfall:12,elevation:790,temperature:45},
{day:'Sunday',rainfall:14,elevation:1220,temperature:24}
];
]]>
</mx:Script>
<mx:ToggleButtonBar dataProvider="{simpleCharts}"
direction="vertical" />
<mx:ViewStack id="simpleCharts" >
<mx:Canvas label="Bar">
<mx:BarChart dataProvider="{chartDP}" >
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{chartDP}"
categoryField="day" />
</mx:verticalAxis>
<mx:series>
<!-- bar chart uses a BarSeries -->
<mx:BarSeries
yField="day" xField="rainfall"
displayName="day" />
</mx:series>
</mx:BarChart>
</mx:Canvas>
<mx:Canvas label="Pie">
<mx:PieChart dataProvider="{chartDP}" >
<!-- no axes need to be defined in a pie chart -->
<mx:series>
<!-- pie chart uses a pie series -->
<mx:PieSeries
field="rainfall"
nameField="day"
labelPosition="callout"
displayName="rainfall" />
</mx:series>
</mx:PieChart>
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
柱状图和HighLowOpenClose 图表则需要一些不同类型的数据集合：
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" backgroundColor="0xFFFFFF">
<mx:Script>
<![CDATA[
// the field names don'tneedtobe'high','open','low',and'close', butyou need four different fields to get this kind of chart to work
[Bindable] public var highLowChartDP:Array = [
{date:"1-Aug-05",open:42.57,high:43.08,low:42.08,close:42.75},
{date:"2-Aug-05",open:42.89,high:43.5,low:42.61,close:43.19},
{date:"3-Aug-05",open:43.19,high:43.31,low:42.77,close:43.22},
{date:"4-Aug-05",open:42.89,high:43,low:42.29,close:42.71},
{date:"5-Aug-05",open:42.49,high:43.36,low:42.02,close:42.99},
{date:"8-Aug-05",open:43,high:43.25,low:42.61,close:42.65},
{date:"9-Aug-05",open:42.93,high:43.89,low:42.91,close:43.82},
{date:"10-Aug-05",open:44,high:44.39,low:43.31,close:43.38},
{date:"11-Aug-05",open:43.39,high:44.12,low:43.25,close:44},
{date:"12-Aug-05",open:43.46,high:46.22,low:43.36,close:46.1}
];
]]>
</mx:Script>
<mx:CandlestickChart
dataProvider="{highLowChartDP}"
showDataTips="true">
<mx:verticalAxis>
<mx:LinearAxis minimum="40" maximum="50" />
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="date" />
</mx:horizontalAxis>
<mx:series>
<mx:CandlestickSeries dataProvider="{highLowChartDP}" openField="open" highField="high" lowField="low" closeField="close" displayName="Rainfall"/>
</mx:series>
</mx:CandlestickChart>
</mx:Application>
layout="horizontal" backgroundColor="0xFFFFFF">
<mx:Script>
<![CDATA[
// the field names don'tneedtobe'high','open','low',and'close', butyou need four different fields to get this kind of chart to work
[Bindable] public var highLowChartDP:Array = [
{date:"1-Aug-05",open:42.57,high:43.08,low:42.08,close:42.75},
{date:"2-Aug-05",open:42.89,high:43.5,low:42.61,close:43.19},
{date:"3-Aug-05",open:43.19,high:43.31,low:42.77,close:43.22},
{date:"4-Aug-05",open:42.89,high:43,low:42.29,close:42.71},
{date:"5-Aug-05",open:42.49,high:43.36,low:42.02,close:42.99},
{date:"8-Aug-05",open:43,high:43.25,low:42.61,close:42.65},
{date:"9-Aug-05",open:42.93,high:43.89,low:42.91,close:43.82},
{date:"10-Aug-05",open:44,high:44.39,low:43.31,close:43.38},
{date:"11-Aug-05",open:43.39,high:44.12,low:43.25,close:44},
{date:"12-Aug-05",open:43.46,high:46.22,low:43.36,close:46.1}
];
]]>
</mx:Script>
<mx:CandlestickChart
dataProvider="{highLowChartDP}"
showDataTips="true">
<mx:verticalAxis>
<mx:LinearAxis minimum="40" maximum="50" />
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="date" />
</mx:horizontalAxis>
<mx:series>
<mx:CandlestickSeries dataProvider="{highLowChartDP}" openField="open" highField="high" lowField="low" closeField="close" displayName="Rainfall"/>
</mx:series>
</mx:CandlestickChart>
</mx:Application>
加支付宝好友偷能量挖...
