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

Posted 2021-05-06

我在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> 

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

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

答案

你是绝对正确的 - Flex已经为你做了这件事。我自己也做了类似的事，很抱歉这对于坟墓。这需要快速进入SDK，特别是在updateMapping函数中设置percentValue属性的第1772行PieSeries.as。

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

_renderData可以通过调用该系列的items属性访问，可在第468行找到。

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

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

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

另一答案

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

当您在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使用图表中的线条