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

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