Flex中如何通过showAllDataTips属性使鼠标移动到图表时显示所有的数据Tips的例子...

原文 http://blog.minidx.com/2008/11/10/1616.html

接下来的例子演示了Flex中如何通过showAllDataTips属性，使鼠标移动到图表时显示所有的数据Tips。

让我们先来看一下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.charts.series.items.PieSeriesItem;
10.             import mx.charts.HitData;
11.  
12.             private function pieChart_rollOver(evt:MouseEvent):void {
13.                 PieChart(evt.currentTarget).showAllDataTips = true;
14.             }
15.  
16.             private function pieChart_rollOut(evt:MouseEvent):void {
17.                 PieChart(evt.currentTarget).showAllDataTips = false;
18.             }
19.  
20.             private function pieChart_dataTipFunction(item:HitData):String {
21.                 var pSI:PieSeriesItem = item.chartItem as PieSeriesItem;
22.                 return "<b>" + pSI.item.@label + "</b><br />" +
23.                         pSI.item.@data + " (<i>" +
24.                         pSI.percentValue.toFixed(2) + "%</i>)";
25.             }
26.         ]]>
27.     </mx:Script>
28.  
29.     <mx:XML id="dp">
30.         <products>
31.             <product label="Product 1" data="3" />
32.             <product label="Product 2" data="1" />
33.             <product label="Product 3" data="4" />
34.             <product label="Product 4" data="1" />
35.             <product label="Product 5" data="5" />
36.             <product label="Product 6" data="9" />
37.         </products>
38.     </mx:XML>
39.  
40.     <mx:PieChart id="pieChart"
41.             dataProvider="{dp.product}"
42.             dataTipFunction="pieChart_dataTipFunction"
43.             height="250"
44.             width="250"
45.             rollOver="pieChart_rollOver(event);"
46.             rollOut="pieChart_rollOut(event);">
47.         <mx:series>
48.             <mx:PieSeries id="pieSeries"
49.                     field="@data" />
50.         </mx:series>
51.     </mx:PieChart>
52.  
53. </mx:Application>

代码：Peter deHaan 翻译/整理/编译：中文Flex例子