Flex中如何在点击PieChart图表的某一部分时弹出显示该部分的例子

2023-05-25 例子图表弹出

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

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.charts.events.ChartItemEvent;
10.  
11.             private function pieChart_itemClick(evt:ChartItemEvent):void {
12.                 var arr:Array = [];
13.                 arr[evt.hitData.chartItem.index] = 0.2;
14.                 pieSeries.perWedgeExplodeRadius = arr;
15.             }
16.         ]]>
17.     </mx:Script>
18.  
19.     <mx:XML id="dp">
20.         <products>
21.             <product label="Product 1" data="3" />
22.             <product label="Product 2" data="1" />
23.             <product label="Product 3" data="4" />
24.             <product label="Product 4" data="1" />
25.             <product label="Product 5" data="5" />
26.             <product label="Product 6" data="9" />
27.         </products>
28.     </mx:XML>
29.  
30.     <mx:PieChart id="pieChart"
31.             dataProvider="{dp.product}"
32.             selectionMode="single"
33.             showDataTips="true"
34.             itemClick="pieChart_itemClick(event);"
35.             height="250"
36.             width="100%">
37.         <mx:series>
38.             <mx:PieSeries id="pieSeries" field="@data">
39.                 <mx:stroke>
40.                     <mx:Stroke color="black" weight="0" />
41.                 </mx:stroke>
42.                 <mx:filters>
43.                     <mx:Array />
44.                 </mx:filters>
45.             </mx:PieSeries>
46.         </mx:series>
47.     </mx:PieChart>
48.  
49. </mx:Application>

相关文章