FlexChart使用教程(2)

2.4 开发实例：

在正式开发前先准备好测试数据，在src目录下新建一个data.xml文件。

蓝色 3 2

红色 5 1

黄色 4 3

绿色

6 4

黑色 3 2

2.5 饼图

打开自动生成的FlexDemo.mxml文件，选择设计模式。在可视控件中打开文件Layout目录,将Panel控件拖到设计面板上面。在右侧的Layout面板下将layout选项选为absolute。这个容器中的控件就可以采用绝对定位的方式进行布局。

接着从Charts目录下拖一个PieChart控件到Panel容器上。修改ID和Series elements属性，ID是PieChart控件的ID属性，pieSvs是PieChart子标签的名称。

点击OK可以看到饼图的控件已经包含到Panel容器里了，但页面布局惨不忍睹。可以用鼠标调整页面布局。

用Ctrl+F11可以运行这个Flex程序。这时你会发现，页面上只有Panel容器却没

有图。这是因为我们还没有将图和数据绑定在起来，现在打开代码编辑模式。

修改代码如下：

dataProvider=\{request.lastResult.data.item}\>

这样的修改有什么意义呢？我们先增加了一个HTTPService标签，id是request。

这是一个http请求标签，URL表示所请求的数据的地址，该地址会返回xml格式的数据。这里我们实际请求的是先前我们编写的data.xml文件。

然后我们在Application标签的creationComplete事件中调用了HTTPService的send方法。这表示应用每次加载的时候都会调用这个方法，发出请求并且获取数据。

第三步我们在PieChart标签中加入dataProvider属性，这个属性将请求的数据和控件绑定。

最后一步我们在PieSeries标签里加上field和nameField两个属性。Field绑定显示的数据，nameField绑定数据的标注。

dataProvider=\{request.lastResult.data.item}\>

我们已经完成了一个最基本的饼图。如果你发现实际的布局和设计模式下的不完全一样，而且怎么调整都还有问题。请按前面讲过的将Panel容器的Layout属性调整为absolute。

此外Flex还有许多功能可以将图调整的更美观，内容更详细。在PieChart标签中添加showDataTips=\true\属性，当鼠标移动到饼图上某个色块时就会显示这个色块的详细信息。在PieSeries标签中添加labelPosition=\callout\labelField=\lable\属性，在饼图外面会显示标注信息。