使用 Adobe Flex 产品线的时候，采用图表和图形来展示数据会使用户与数据的交互更加容易。相对简单的数字表格来说，可以使用表示数据的不同颜色、标题、线条来展示条形图、饼图、线图等等。
图表控件是 Adobe Flash Builder 专业版的特性。也可以在 Falsh Builder 标准版中创建图表，但是图表控件上面会有一个水印。
数据可视化使用简单的数据交互和数据关系展示数据。图表是数据可视化方式的一种，它可以创建二维的数据表示。 Flex 提供一些最常用的数据图表类型（如条形图、饼图等），并且提供强大的图表表示控制方式。
一个简单图表展示了单独的数据序列，由一些相关数据点组成。例如，一个数据序列可能是月销售收入或酒店日入住率。
使用图表控件
Flex 图表控件可以创建一些最常用的图表类型，并且自定义其表现形式。图表控件在 mx.charts.* 包中。
下表列出了提供 Flex 提供的图表类型、控件类名以及用来定义每个图表的数据表示的序列类名。
| 图表类型 | 图表控件类 | 图表序列类 |
| Area | AreaChart | AreaSeries |
| Bar | BarChart | BarSeries |
| Bubble | BubbleChart | BubbleSeries |
| Candlestick | CandlestickChart | CandlestickSeries |
| Column | ColunmChart | ColumnSeries |
| HighLowOpenClose | HLOCChart | HLOCseries |
| Line | LineChart | LineSeries |
| Pie | PieCahrt | PieSeries |
| Plot | PlotChart | PlotSeries |
所有的图表控件，除了 PieChart 类之外，都是 CartesianChart 类的子类。 笛卡尔图表（ Cartesian Chart ）专门用来在矩形和二维空间表示数据点集。 PieChart 类是 PolarChart 类的子类，它表示圆形区域的数据。
所有的图表控件都继承自 ChartBase 类的基本图形特征。
在 MXML 中，图表控件通常具有以下结构：
<!-- 定义一个或多个序列 -->
<mx:SeriesName/>
<!-- 定义水平轴与竖直轴 -->
<mx:horizontalAxis>
<mx:axis_type/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:axis_type/>
</mx:verticalAxis>
<!-- 定义样式 -->
<mx:horizontalAxisRenderers>
<mx:AxisRenderer/>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer/>
</mx:verticalAxisRenderers/>
<!-- 添加框格线盒其它元素 -->
<mx:annotationElements>
<mx:Array/>
</mx:annotationElements>
<mx:backgroundElements>
<mx:Array/>
</mx:backgroundElements/>
</mx:ChartName>
<!-- 定义图例（可选） -->
<mx:Legend/>
下表描述了图表部件的更多细节：
| 部件 | 描述 |
| Chart | （必需）为图表定义一个或两个数据源。定义图表类型和数据提示、鼠标敏感度、gutter 样式、axis 样式 |
| Series | （必需）为图表的展示定义一个或两个数据序列。设置数据序列的线条、填充、渲染以及每个序列图示的线条和填充。 也可以为每个图表定义第二个序列集合，从而在单个图表上展示多重数据序列。 图表中的每个序列可以有其自己的数据源。 |
| Axes | 设置轴类型（数字或分类）。定义轴标签、标题和样式。 |
| Axes renderer | （可选）设置设置样式、标签的可用性，定义轴线、标签角度和间距。 |
| Elements | （可选）定义框格线以及一些额外元素以表现在图表上。 |
对于每个图表类型， Flex 提供相应的的图表控件和图表序列。图表控件定义图表的类型、数据源、框格线、轴文本以及一些其他的属性。图表控件的数据源（ dataProvider ）属性确定了图表使用的数据。数据源是一个包含若干对象的集合，它可以使对象的数组（ Array ）或者其它继承了集合 API 的对象。数据源也可以是带有 XML 节点的 XMLList 对象，如 E4X 的查询结果。
图表组件使用平面或基于列表的数据源，类似一维数组。数据源能够包含字符串、数字，甚至是其他的一些对象。
使用图表序列指定数据源中的哪些数据需要在图表上面显示。数据源可以包含一些需要显示在数据图表上之外的一些数据，所以需要使用图表序列来指定数据源中需要的点。可以指定一个单独的数据序列，或者第二个序列。可以使用图表序列定义数据在图表上面的表现形式。
所有的图表序列都继承了图表的数据源，除非它们有明确的数据源集。若要设置图标控件的 dataProvider 属性，不必在序列之上设置属性值。当然，也可以为图表控件中的每一个序列定义不同的数据源。
例如，创建一个饼图，就用带 PieSeries 图表序列的 PieChart 控件。要创建面图，就用带 AreaSeries 图表序列的 AreaChart 控件，示例如下：
<!-- charts/BasicAreaOneSeries.mxml -->
<!-- http://www.slsay.com/archives/153 -->
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses: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}
]);
]]>
</fx:Script>
<mx:Panel title="Area Chart">
<mx:AreaChart id="myChart" dataProvider="{expenses}"
showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="Profit"/>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
此例中，定义了一个包含于
可以添加第二个
<!-- charts/BasicArea.mxml -->
<!-- http://www.slsay.com/archives/153 -->
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()">
<fx:Declarations>
<mx:HTTPService id="srv"
url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
</fx:Declarations>
<mx:Panel title="Area Chart">
<mx:AreaChart id="myChart" showDataTips="true"
dataProvider="{srv.lastResult.data.result}">
<mx:horizontalAxis>
<mx:CategoryAxis
categoryField="month"
displayName="Month"/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries
yField="profit"
displayName="Profit"/>
<mx:AreaSeries
yField="expenses"
displayName="Expenses"/>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
并不一定在图表控件上定义数据源。每个序列可以有他自己的数据源，如下所示：
<!-- charts/MultipleDataProviders.mxml -->
<!-- http://www.slsay.com/archives/153 -->
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var profit04:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000},
{Month:"Feb", Profit:1000},
{Month:"Mar", Profit:1500}
]);
[Bindable]
public var profit05:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2200},
{Month:"Feb", Profit:1200},
{Month:"Mar", Profit:1700}
]);
[Bindable]
public var profit06:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2400},
{Month:"Feb", Profit:1400},
{Month:"Mar", Profit:1900}
]);
]]>
</fx:Script>
<mx:Panel title="Column Chart">
<mx:ColumnChart id="myChart"
dataProvider="{profit04}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
dataProvider="{profit04}"
yField="Profit"
xField="Month"
displayName="2004"/>
<mx:ColumnSeries
dataProvider="{profit05}"
yField="Profit"
xField="Month"
displayName="2005"/>
<mx:ColumnSeries
dataProvider="{profit06}"
yField="Profit"
xField="Month"
displayName="2006"/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
要实现动态地改变图表的大小以使用浏览器窗口，需要将 width 和 height 属性值设为百分比数值，如下所示：
<!-- charts/BasicBarSize.mxml -->
<!-- http://www.slsay.com/archives/153 -->
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1500},
{Month:"Feb", Profit:1000, Expenses:200},
{Month:"Mar", Profit:1500, Expenses:500}
]);
]]>
</fx:Script>
<mx:Panel title="Bar Chart" height="500" width="500">
<mx:BarChart id="myChart"
dataProvider="{expenses}"
height="100%"
width="100%"
showDataTips="true">
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries
yField="Month"
xField="Profit"
displayName="Profit"/>
<mx:BarSeries
yField="Month"
xField="Expenses"
displayName="Expenses"/>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
如果希望在窗口大小变化时改变图表的大小，要使用百分比数值设置图表的父容器的大小。