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

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> 

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

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

Answer 1

您不需要自定义公式来计算这个百分比，这是一个标准计算，而且饼图必须进行预制，以便为每个值分配多大的饼图。

当您在chart对象上设置field和dataProvider时，需要执行此操作的所有信息。虽然我不能为您提供与在这里运行确切的代码是一个简单的近似：

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与线脱落图表