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(),方便我们的调用。

 

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

        

 

         收工!


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/daguigto/archive/2009/08/27/4490902.aspx

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值