Flex中如何在点击PieChart图表数据块时获取具体数据内容的例子

By Minidxer | November 26, 2008

接下来的例子演示了Flex中如何在点击PieChart图表数据块时获取具体数据内容。

让我们先来看一下Demo可以右键View Source或点击这里察看源代码):


下面是完整代码(或点击这里察看):

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.controls.Alert;
  10.             import mx.charts.series.items.PieSeriesItem;
  11.             import mx.charts.events.ChartItemEvent;
  12.  
  13.             private function pieChart_itemClick(evt:ChartItemEvent):void {
  14.                 var psi:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;
  15.                 Alert.show("data=" + psi.item.@data + "n" + "percentValue=" + psi.percentValue.toFixed(1) + "%", "label=" + psi.item.@label);
  16.             }
  17.         ]]>
  18.     </mx:Script>
  19.  
  20.     <mx:XML id="dp">
  21.         <products>
  22.             <product label="Product 1" data="3" />
  23.             <product label="Product 2" data="1" />
  24.             <product label="Product 3" data="4" />
  25.             <product label="Product 4" data="1" />
  26.             <product label="Product 5" data="5" />
  27.             <product label="Product 6" data="9" />
  28.         </products>
  29.     </mx:XML>
  30.  
  31.     <mx:PieChart id="pieChart"
  32.             dataProvider="{dp.product}"
  33.             itemClick="pieChart_itemClick(event);"
  34.             showDataTips="true"
  35.             height="100%"
  36.             width="100%">
  37.         <mx:series>
  38.             <mx:PieSeries id="pieSeries"
  39.                     field="@data"
  40.                     labelPosition="callout">
  41.                 <mx:stroke>
  42.                     <mx:Stroke color="black" weight="0" />
  43.                 </mx:stroke>
  44.                 <mx:filters>
  45.                     <mx:Array />
  46.                 </mx:filters>
  47.             </mx:PieSeries>
  48.         </mx:series>
  49.     </mx:PieChart>
  50.  
  51. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: Chart | No Comments » | 795 views Tags: , , ,

Search Posts