Question

我在adobe flash builder 4.5中制作了一个圆环饼图，其中显示了鼠标悬停期间每个扇区的工具提示。我想知道应用程序如何计算和显示每个扇区的百分比，即使我只是在数组集合中提供值而下面给出的代码中没有使用公式。

请帮助

我的完整代码..

 <?xml version="1.0" encoding="utf-8"?>
 <!-- http://blog.flexexamples.com/2007/10/13/creating-donut-shaped-pie-charts-using-the-innerradius-style/ -->
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">

<mx:Script>
    <![CDATA[
        private function labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {
            return item.name + ": " + '\n' + "AVG: " + item.avg;
        }
    ]]>
</mx:Script>

<mx:ArrayCollection id="arrColl">
    <mx:source>
        <mx:Array>
            <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
            <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
            <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
            <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
            <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
        </mx:Array>
    </mx:source>
</mx:ArrayCollection>



<mx:PieChart id="chart"
             height="100%"
             width="100%"
             innerRadius="0.5"
             showDataTips="true"
             dataProvider="{arrColl}" >
    <mx:series>
        <mx:PieSeries labelPosition="callout"
                      field="avg"
                      labelFunction="labelFunc">
            <mx:calloutStroke>
                <mx:Stroke weight="0"
                           color="0x888888"
                           alpha="100"/>
            </mx:calloutStroke>
            <mx:radialStroke>
                <mx:Stroke weight="0"
                           color="#FFFFFF"
                           alpha="20"/>
            </mx:radialStroke>
            <mx:stroke>
                <mx:Stroke color="0"
                           alpha="20"
                           weight="2"/>
            </mx:stroke>
        </mx:PieSeries>
    </mx:series>
</mx:PieChart>

    </mx:Application>

这是输出的屏幕截图，即饼图

Donut-piechart

我想知道23.2％的值是如何显示为橙色扇区的工具提示，即使我没有在我的代码中的任何地方写它...如果调用sdk的任何函数来计算百分比那么它在哪里？

Answer 1

您绝对正确-Flex已经为您做到了。我自己也在做类似的事情，所以对死灵书感到抱歉。这需要快速进入SDK，特别是updateMapping函数中设置了percentValue属性的PieSeries.as行1772行。

 for (i = 0; i < n; i++)
 {
     _renderData.cache[i].percentValue = _renderData.cache[i].number/total;
 }

可以通过调用该行的_renderData属性（位于第468行）来访问

items。

override public function get items():Array /* of PieSeriesItem */
{
    return _renderData ? _renderData.filteredCache : null;
}

因此，如果您想知道PieSeries中索引3处项目的百分比，请执行以下操作：

var item3Percent:Number = chart.series[0].items[3].percentValue;

Answer 2

您不需要自定义公式来计算此百分比，它是一个标准计算，并且饼图必须预先形成，以便为每个值提供饼的大小。

在field对象上设置dataProvider和chart时，会提供执行此操作所需的所有信息。虽然我无法为您提供在此处运行的确切代码，但这是一个简单的近似值：

function getRowPercentValue(row:Object):Number
{
    return (row[field] / getTotalFieldValue()) * 100
}
function getTotalFieldValue():Number
{
    var returnVal:Number = 0;
    for each(var row:Object in dataProvider)
    {
        returnVal += row[field];
    }
    return returnVal;
}

请注意这是一些伪代码，饼图将比这更优化并且会做一些聪明的事情（比如使用row.valueOf()等field == undefined等等。）

至于为什么它会显示在那里，它将成为工具提示渲染器的一部分，您可以看到自定义labelFunc使用图表中的线条

计算Adobe Flex饼图中每个扇区的百分比

2 个答案: