FusionCharts使用实例

       FusionCharts是一套很有用的统计图生成工具，flash的，价格为4999美刀～不过免费版的和正式版的功能上没啥区别，就是头顶上多了一条公司广告，不过这也挺烦人的。没办法，咱们没美刀，又是良好村民，不敢用那个什么破解版，忍忍吧。

      废话少说，先上图，下面图片就是FusionCharts的效果，很强吧，这只是其中一种效果，因为这里是图片，没法看到动画效果，不敢静态图也包不住他对人的吸引力啊。

 

 

 

 

 

免费版本可以到http://www.fusioncharts.com/Download.asp下载，解压后得到下面图片所示。

 

        可以看看里面的示例，不过那也够啰嗦的，而且是洋文，所以还是看我的文章吧～我们只要Charts和JSClass两个文件夹就够了，当然JSClass里面就一个js文件而已，完全可以放到Charts文件夹里面。

       OK，说一下FusionCharts大概的执行流程：

       1.我们先从数据库取数据；

       2.用php代码做一个生成xml的函数，把数据生成xml；

       3.用一段js读取xml，送到FusionCharts，生成统计图表。

       说起来还是挺烦琐的，所以还是开始做吧。这里要做两个函数，makexml()，render()，方便我们的调用。

 

代码

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

 

 注意！FusionCharts根据生成统计表的不同分了两种xml格式，如下所示，大家可以参考Gallery\Data文件夹里面。。可能我说漏了也说不定。所以上面那个函数是对应生成第一种，另一种大家自行搞定～

 

代码

<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 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()函数。

 

代码

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数组里。

 

 

代码

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打印出来就搞定了～

 

 

<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 ?> 

 

 

转:http://blog.csdn.net/daguigto/archive/2009/08/27/4490902.aspx