Flex 雷達圖 RadarChart 運用

　　今天網上找了很多雷達圖的資料，結果都用不了，不是代碼不全，就是版本不支援，下面介紹我最後找到的資料。

 

   http://flex.amcharts.com/ 這個網站的雷達圖效果很炫，雖然是免費的，但會添加這個網站的連結，搜了下破解居然能找到破解這個連結的，具體操作如下。

 

1、   http://flex.amcharts.com/ 網站中下載免費的圖形資源，我下的是：amcharts_flex_components_1.8.3.1.zip。

2、解壓後在Documentation\Build檔案夾中找到amChartsFB4.swc  （我的Flex用的是4.1版本）

3、將amChartsFB4.swc  複製到項目的libs檔案夾中

4、Flex src下建立檔案夾Class  用來存放ActionScript類檔案

5、在Class檔案夾下建立ActionScript類 AmRadarChart

 

package Class
{
    import com.amcharts.AmRadarChart;
    
    public class AmRadarChart extends com.amcharts.AmRadarChart
    {
        public function AmRadarChart()
        {
            super();
        }
        public function onClick():void{
            this;
        }
        override protected function createChildren():void{
            super.createChildren();  
            if (_amchartsLink){  
                 _amchartsLink.visible=false; 
            }

        }
    }
}

6、定義前台顯示MXML應用程式，代碼如下

 

View Code

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
               xmlns:Class="Class.*" xmlns:amcharts="http://www.amcharts.com/com_internal" >
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Declarations>
        <!-- 將非可視元素（例如服務、值對象）放在此處 -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var chartData:ArrayCollection = new ArrayCollection([
                {Name:"Sales", InSum:20, TransactionNumber:18, SalesAmount:20, UnitAreaAttraction:7,SalesPerUnitArea:39,  ConversionRate:45},
                {Name:"Development", InSum:15, TransactionNumber:13, SalesAmount:20, UnitAreaAttraction:18,SalesPerUnitArea:22,  ConversionRate:4},
                {Name:"Marketing", InSum:12, TransactionNumber:16, SalesAmount:20, UnitAreaAttraction:8,SalesPerUnitArea:38,  ConversionRate:15}, 
                {Name:"Customer support", InSum:18, TransactionNumber:15, SalesAmount:10, UnitAreaAttraction:18,SalesPerUnitArea:32,  ConversionRate:35}, 
                {Name:"Administration", InSum:11, TransactionNumber:5, SalesAmount:20, UnitAreaAttraction:17,SalesPerUnitArea:12,  ConversionRate:25}, 
                {Name:"Information technology", InSum:19, TransactionNumber:13, SalesAmount:20, UnitAreaAttraction:18,SalesPerUnitArea:2,  ConversionRate:8}]); 

        ]]>
    </fx:Script>

    <Class:AmRadarChart id="chart" dataProvider="{chartData}" categoryField="Name" width="100%" height="235" startDuration="1">  
        <Class:valueAxes>
            <amcharts:ValueAxis fillAlpha="0.05" fillColor="0x000000" axisAlpha="0.3" gridAlpha="0.05" fontWeight="bold" min="0"/> 
        </Class:valueAxes>
        <Class:graphs>  
            
            <amcharts:AmGraph   
                
                title="客流量"  
                
                valueField="InSum"  
                
                bullet="bubble"  
                
                balloonText="客流量: [[value]]"/>                  
            
            <amcharts:AmGraph   
                
                title="交易筆數"  
                
                valueField="TransactionNumber"  
                
                bullet="round" 
                
                markerType="square"  
                
                balloonText="交易筆數: [[value]]"/>     
            
            <amcharts:AmGraph   
                
                title="銷售額"  
                
                valueField="SalesAmount"  
                
                bullet="square"  
                
                balloonText="銷售額: [[value]]"/>                  
            
            <amcharts:AmGraph   
                
                title="集客力"  
                
                valueField="UnitAreaAttraction"  
                
                bullet="custom" 
                
                markerType="square"  
                
                balloonText="集客力: [[value]]"/>    
            
            <amcharts:AmGraph   
                
                title="坪效"  
                
                valueField="SalesPerUnitArea"  
                
                bullet="triangleDown"  
                
                balloonText="坪效: [[value]]"/>                  
            
            <amcharts:AmGraph   
                
                title="提袋率"  
                
                valueField="ConversionRate"  
                
                bullet="triangleUp" 
                
                markerType="square"  
                
                balloonText="提袋率: [[value]]"/>    
            
        </Class:graphs>      
        
        
        
    </Class:AmRadarChart>  

    <amcharts:AmLegend fontSize="12" markerType="triangleDown" dataProvider=" {chart}" align="left" textClickEnabled="false" width="100%" borderAlpha="1.0"/> 

</s:Application>

 

相關連結：http://www.cnblogs.com/wyqx/archive/2011/07/29/2120690.html