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

2021-07-03 08:48:02

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

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

让我们先来看一下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.charts.series.items.PieSeriesItem;
import mx.charts.HitData;
private function pieChart_rollOver(evt:MouseEvent):void {
PieChart(evt.currentTarget).showAllDataTips = true;
}
private function pieChart_rollOut(evt:MouseEvent):void {
PieChart(evt.currentTarget).showAllDataTips = false;
}
private function pieChart_dataTipFunction(item:HitData):String {
var pSI:PieSeriesItem = item.chartItem as PieSeriesItem;
return "<b>" + pSI.item.@label + "</b><br />" +
pSI.item.@data + " (<i>" +
pSI.percentValue.toFixed(2) + "%</i>)";
}
]]>
</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}"
dataTipFunction="pieChart_dataTipFunction"
height="250"
width="250"
rollOver="pieChart_rollOver(event);"
rollOut="pieChart_rollOut(event);">
<mx:series>
<mx:PieSeries id="pieSeries"
field="@data" />
</mx:series>
</mx:PieChart>
</mx:Application>

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