在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與線脫落圖表