Flex中如何在点击PieChart图表数据块时获取具体数据内容的例子
By Minidxer | November 26, 2008
接下来的例子演示了Flex中如何在点击PieChart图表数据块时获取具体数据内容。
让我们先来看一下Demo(可以右键View Source或点击这里察看源代码):
下面是完整代码(或点击这里察看):
Download: main.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- backgroundColor="white">
- <mx:Script>
- <![CDATA[
- import mx.controls.Alert;
- import mx.charts.series.items.PieSeriesItem;
- import mx.charts.events.ChartItemEvent;
- private function pieChart_itemClick(evt:ChartItemEvent):void {
- var psi:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;
- Alert.show("data=" + psi.item.@data + "n" + "percentValue=" + psi.percentValue.toFixed(1) + "%", "label=" + psi.item.@label);
- }
- ]]>
- </mx:Script>
- <mx:XML id="dp">
- <products>
- <product label="Product 1" data="3" />
- <product label="Product 2" data="1" />
- <product label="Product 3" data="4" />
- <product label="Product 4" data="1" />
- <product label="Product 5" data="5" />
- <product label="Product 6" data="9" />
- </products>
- </mx:XML>
- <mx:PieChart id="pieChart"
- dataProvider="{dp.product}"
- itemClick="pieChart_itemClick(event);"
- showDataTips="true"
- height="100%"
- width="100%">
- <mx:series>
- <mx:PieSeries id="pieSeries"
- field="@data"
- labelPosition="callout">
- <mx:stroke>
- <mx:Stroke color="black" weight="0" />
- </mx:stroke>
- <mx:filters>
- <mx:Array />
- </mx:filters>
- </mx:PieSeries>
- </mx:series>
- </mx:PieChart>
- </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子
Topics:
Chart |
No Comments » |
795 views
Tags: itemClick, PieChart, PieSeries, PieSeriesItem