FusionCharts是一套很有用的統計圖生成工具，本文主要介紹一下FusionCharts大概的執行流程：

1.我們先從數據庫取數據；

2.用php代碼做一個生成xml的函數，把數據生成xml；

3.用一段js讀取xml，送到FusionCharts，生成統計圖表。

說起來還是挺煩瑣的，所以還是開始做吧。這里要做兩個函數，makexml()，render()，方便我們的調用。

view plaincopy to clipboardprint?
function makexml($data)   
{   
    $strXML .= "";   
    foreach ($data as $k=>$v)   
    {   
        $strXML .= "<set name='".$v['Option']."' value='".$v['Num']."' />"; //省掉了color   
    }   
    return $strXML;   
}  
function makexml($data)
{
    $strXML .= "";
    foreach ($data as $k=>$v)
    {
        $strXML .= "<set name='".$v['Option']."' value='".$v['Num']."' />"; //省掉了color
    }
    return $strXML;
} 

注意！FusionCharts根據生成統計表的不同分了兩種xml格式，如下所示，大家可以參考Gallery/Data文件夾里面。可能我說漏了也說不定。所以上面那個函數是對應生成第一種。

view plaincopy to clipboardprint?
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0' chartRightMargin='30'>  
<set name='Jan' value='462' color='AFD8F8' />  
<set name='Feb' value='857' color='F6BD0F' />  
<set name='Mar' value='671' color='8BBA00' />  
<set name='Apr' value='494' color='FF8E46'/>  
<set name='May' value='761' color='008E8E'/>  
</graph>  
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0' chartRightMargin='30'>
<set name='Jan' value='462' color='AFD8F8' />
<set name='Feb' value='857' color='F6BD0F' />
<set name='Mar' value='671' color='8BBA00' />
<set name='Apr' value='494' color='FF8E46'/>
<set name='May' value='761' color='008E8E'/>
</graph>
 

  

view plaincopy to clipboardprint?
<graph xaxisname='Continent' yaxisname='Export' hovercapbg='DEDEBE' hovercapborder='889E6D' rotateNames='0' yAxisMaxValue='100' numdivlines='9' divLineColor='CCCCCC' divLineAlpha='80' decimalPrecision='0' showAlternateHGridColor='1' AlternateHGridAlpha='30' AlternateHGridColor='CCCCCC' caption='Global Export' subcaption='In Millions Tonnes per annum pr Hectare' >  
   <categories font='Arial' fontSize='11' fontColor='000000'>  
      <category name='N. America' hoverText='North America'/>  
      <category name='Asia' />  
      <category name='Europe' />  
      <category name='Australia' />  
      <category name='Africa' />  
   </categories>  
   <dataset seriesname='Rice' color='FDC12E'>  
      <set value='30' />  
      <set value='26' />  
      <set value='29' />  
      <set value='31' />  
      <set value='34' />  
   </dataset>  
    <dataset seriesname='Wheat' color='56B9F9'>  
      <set value='67' />  
      <set value='98' />  
      <set value='79' />  
      <set value='73' />  
      <set value='80' />  
   </dataset>  
    <dataset seriesname='Grain' color='C9198D' >  
      <set value='27' />  
      <set value='25' />  
      <set value='28' />  
      <set value='26' />  
      <set value='10' />  
   </dataset>  
</graph>  
   
<graph xaxisname='Continent' yaxisname='Export' hovercapbg='DEDEBE' hovercapborder='889E6D' rotateNames='0' yAxisMaxValue='100' numdivlines='9' divLineColor='CCCCCC' divLineAlpha='80' decimalPrecision='0' showAlternateHGridColor='1' AlternateHGridAlpha='30' AlternateHGridColor='CCCCCC' caption='Global Export' subcaption='In Millions Tonnes per annum pr Hectare' >
   <categories font='Arial' fontSize='11' fontColor='000000'>
      <category name='N. America' hoverText='North America'/>
      <category name='Asia' />
      <category name='Europe' />
      <category name='Australia' />
      <category name='Africa' />
   </categories>
   <dataset seriesname='Rice' color='FDC12E'>
      <set value='30' />
      <set value='26' />
      <set value='29' />
      <set value='31' />
      <set value='34' />
   </dataset>
    <dataset seriesname='Wheat' color='56B9F9'>
      <set value='67' />
      <set value='98' />
      <set value='79' />
      <set value='73' />
      <set value='80' />
   </dataset>
    <dataset seriesname='Grain' color='C9198D' >
      <set value='27' />
      <set value='25' />
      <set value='28' />
      <set value='26' />
      <set value='10' />
   </dataset>
</graph>

接下來是render()函數

view plaincopy to clipboardprint?
function render($caption, $XAxisName, $chartSWF, $XML, $chartId='char', $chartWidth=265, $chartHeight=200, $debugMode=false, $registerWithJS=true)   
{   
    //animation=1： 開啟flash，0：關閉flash效果 caption:表頭標題 XAxisName：x軸標題 decimalPrecision：坐標顯示小數位數 baseFontSize：字體大小 formatNumberScale：格式化坐標 numberPrefix：在數值前面加符號 showValues：顯示數值   
    $strXML  = "<graph caption='$caption' XAxisName='$XAxisName' palette='2' decimalPrecision='0' baseFontSize='12' animation='1' formatNumberScale='1' numberPrefix='' showValues='0' >";   
    $strXML .= $XML;   
    $strXML .= "</graph>";   
    $tempData = "//Provide entire XML data using dataXML methodnttchart_$chartId.setDataXML("$strXML");";   
    
    // Set up necessary variables for the RENDERCAHRT   
    $chartIdDiv = $chartId . "Div";   
    $ndebugMode = boolToNum($debugMode);   
    $nregisterWithJS = boolToNum($registerWithJS);   
    
    // create a string for outputting by the caller   
    $render_chart = "   
    
        <!-- START Script Block for Chart $chartId -->   
        <div id='$chartIdDiv' align='center'>   
            Chart.   
        </div>   
        <mce:script type="text/javascript"><!--   
    
            //Instantiate the Chart    
            var chart_$chartId = new FusionCharts("Charts/$chartSWF", "$chartId", "$chartWidth", "$chartHeight", "$ndebugMode", "$nregisterWithJS");   
            $tempData  
            //Finally, render the chart.   
            chart_$chartId.render("$chartIdDiv");   
           
// --></mce:script>      
        <!-- END Script Block for Chart $chartId -->";   
    
    return $render_chart;   
}  
function render($caption, $XAxisName, $chartSWF, $XML, $chartId='char', $chartWidth=265, $chartHeight=200, $debugMode=false, $registerWithJS=true)
{
    //animation=1： 開啟flash，0：關閉flash效果 caption:表頭標題 XAxisName：x軸標題 decimalPrecision：坐標顯示小數位數 baseFontSize：字體大小 formatNumberScale：格式化坐標 numberPrefix：在數值前面加符號 showValues：顯示數值
    $strXML  = "<graph caption='$caption' XAxisName='$XAxisName' palette='2' decimalPrecision='0' baseFontSize='12' animation='1' formatNumberScale='1' numberPrefix='' showValues='0' >";
    $strXML .= $XML;
    $strXML .= "</graph>";
    $tempData = "//Provide entire XML data using dataXML methodnttchart_$chartId.setDataXML("$strXML");";
 
    // Set up necessary variables for the RENDERCAHRT
    $chartIdDiv = $chartId . "Div";
    $ndebugMode = boolToNum($debugMode);
    $nregisterWithJS = boolToNum($registerWithJS);
 
    // create a string for outputting by the caller
    $render_chart = "
 
        <!-- START Script Block for Chart $chartId -->
        <div id='$chartIdDiv' align='center'>
            Chart.
        </div>
        <mce:script type="text/javascript"><!--
 
            //Instantiate the Chart 
            var chart_$chartId = new FusionCharts("Charts/$chartSWF", "$chartId", "$chartWidth", "$chartHeight", "$ndebugMode", "$nregisterWithJS");
            $tempData
            //Finally, render the chart.
            chart_$chartId.render("$chartIdDiv");
        
// --></mce:script>   
        <!-- END Script Block for Chart $chartId -->";
 
    return $render_chart;
}

接下來就到了調用過程，簡單的幾句話，假設數據放在result數組里。

view plaincopy to clipboardprint?
foreach ($results as $key => $value) {   
        $arr[] = array('Option'=>$value['name'],'Num'=>$value['num']);    
    }   
    $xml = makexml($arr);   
    $fusionchart = 'Pie3D.swf';   
    $output = render($title,'',$fusionchart,$xml,$id);//每個圖的id要不一樣的，一樣的話就。。。  
foreach ($results as $key => $value) {
        $arr[] = array('Option'=>$value['name'],'Num'=>$value['num']); 
    }
    $xml = makexml($arr);
    $fusionchart = 'Pie3D.swf';
    $output = render($title,'',$fusionchart,$xml,$id);//每個圖的id要不一樣的，一樣的話就。。。

最后在html加入js文件調用代碼，把output打印出來就搞定了～

view plaincopy to clipboardprint?
<mce:script type="text/javascript" src="tool/admin/vendors/FusionCharts/FusionCharts.js" mce_src="tool/admin/vendors/FusionCharts/FusionCharts.js"></mce:script>  
<?php echo $output ?>  
<mce:script type="text/javascript" src="tool/admin/vendors/FusionCharts/FusionCharts.js" mce_src="tool/admin/vendors/FusionCharts/FusionCharts.js"></mce:script>
<?php echo $output ?>