如何在Adobe Flash Builder中制作sem圆环图

时间:2014-07-04 08:47:42

标签: actionscript-3 flash flash-builder mxml dashboard

我正在使用Adobe Flash Builder为我的UI需要制作不同类型的图表。我知道如何制作圆环图但我不知道如何修改代码以使图表看起来像这样。

Bug_meter

我对Donut Piechart的MXML代码..

    <?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:RemoteObject id="ro" destination="donut_piechart"/>
<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

0 个答案:

没有答案