在php中使用FusionCharts

最新推荐文章于 2021-04-11 14:34:01 发布

君望永远

最新推荐文章于 2021-04-11 14:34:01 发布

阅读量2k

点赞数

分类专栏： PHP 文章标签： php json function html url extjs

PHP 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

数据格式有setDataURL(srcUrl)和setJSONData(jsonStr)两种
用法在官方demo和document都有详细解释。
在实际需求中，直接参考官方资料还是挺方便的。

fileUrl = '../path/to/xx.swf'; //swf文件路径
srcUrl = 'http://url?a=1&b=2'; //向后端请求的url。

一、setDataURL(srcUrl)方式

    Php代码   
    
  
 //前端：  
 <div id="outsource_sta_1"></div>  
 var myChart = new FusionCharts(fileUrl, "myChartId", "600", "500");  
 myChart.setDataURL(srcUrl);  
 myChart.render("outsource_sta_1");  
   
 //后端：  
 $xml = "<chart palette=\"2\" caption=\"平均处理时间统计\" xAxisName=\"机型\" yAxisName=\"平均处理时间\" showValues=\"1\" decimals=\"2\" formatNumberScale=\"0\" useRoundEdges=\"1\" showPercentValues='1' >";  
 for($i = 1; $i < 6; $i++){  
     $data[] = array('label'=>'m'.$i, 'value'=>$i);  
     $xml .= "<set label=\"'m'.$i\" value=\"$i\" />";  
 }  
 $xml .= "</chart>";  
 print $xml;  

批注1：本质是data.xml，可以直接丢一个data.xml格式的文件，也可以是一个url，该url的返回值是xml格式的数据。
批注2：有可能乱码。在yii中使用会乱码。但在extjs中没有。

二、setJSONData(jsonStr)
又分两种情况：
第一种情况是new FusionCharts(...)在前端，仅jsonStr从后端获取
例如：

    Php代码   
    
  
 //前端：  
 <div id="outsource_sta_1"></div>  
 $.post(srcUrl,null,function(r){  
     var myChart = new FusionCharts(fileUrl, "myChartId", "600", "500");  
     myChart.setJSONData(r);  
     myChart.render("outsource_sta_1");  
 },'json');  
   
 //后端：  
 $data = array();  
 for($i = 1; $i < 6; $i++){  
     $data[] = array('label'=>'m'.$i, 'value'=>$i);  
 }  
 $chart = array();  
 $chart['palette'] = 2;  
 $chart['caption'] = "平均处理时间统计";  
 $chart['xAxisName'] = "机型";  
 $chart['yAxisName'] = "平均处理时间";  
 $chart['showValues'] = 1;  
 $chart['decimals'] = 2;  
 $chart['formatNumberScale'] = 0;  
 $chart['useRoundEdges'] = 1;  
 $chart['showPercentValues'] = 1;  
 $ret = array('chart'=>$chart,'data'=>$data);  
 print json_encode($ret);  

批注：$.post()的返回值是'json'类型。

第二种情况是所有都在后端，前端直接$(".outsource_content").html(r)

    Php代码   
    
  
 //前端：  
 <div id="outsource_sta_1"></div>  
 $.post(srcUrl,null,function(r){  
     $(".outsource_content").html(r);  
 },'html');  
   
 //后端：  
 $data = array();  
 for($i = 1; $i < 6; $i++){  
     $data[] = array('label'=>'m'.$i, 'value'=>$i);  
 }  
 $chart = array();  
 $chart['palette'] = 2;  
 $chart['caption'] = "平均处理时间统计";  
 $chart['xAxisName'] = "机型";  
 $chart['yAxisName'] = "平均处理时间";  
 $chart['showValues'] = 1;  
 $chart['decimals'] = 2;  
 $chart['formatNumberScale'] = 0;  
 $chart['useRoundEdges'] = 1;  
 $chart['showPercentValues'] = 1;  
 $ret = array('chart'=>$chart,'data'=>$data);  
 $ret = json_encode($ret);  
 $ret = self::generateChart('Column2D',$ret, 600,500, 'myid1', 'outsource_sta_1');  
 $ret = self::wrapScript($ret);  
 print $ret;  
   
 public static function wrapScript($scripts){  
     $html = '<script type="text/javascript">';  
     $html.= "\n";  
     $html.= $scripts;  
     $html.= "\n";  
     $html.= "</script>";  
     return $html;  
 }  
 public static function generateChart($type, $data, $width=0, $height=0, $myid='', $div_id=''){  
     if(!$type || !$data){  
         return '';  
     }  
     $width = intval($width)?intval($width):800;  
     $height = intval($height)?intval($height):400;  
     $width = $width<600?600:$width;  
     $height = $height<400?400:$height;  
     $url = Yii::app()->baseUrl . "/resources/fusion/{$type}.swf";  
     $mychartid = $myid . 'a';  
     $script = <<<JAVASCRIPT  
 var {$myid} = new FusionCharts('{$url}','{$mychartid}', '{$width}','{$height}');  
 {$myid}.setJSONData('{$data}');  
 {$myid}.render('{$div_id}');  
 JAVASCRIPT;  
     return $script;  
 }  

批注1：$.post()的返回值是'html'类型。也可以测试其他类型是否可以正常显示。
但是不能是json格式。其本质是一些已经组建好的javascript，添加到制定div后就立即执行了。

批注2：针对第二种情况，也可以显示两个图表，（当然也可以显示多个）
<div id="outsource_sta_1"></div>
<div id="outsource_sta_2"></div>
后端在添加：

    Php代码   
    
  
 $ret2 = $ret;  
 $ret2 = self::generateChart('Column2D', $ret2, 600,500,'myid2','outsource_sta_2');  
 $ret2 = self::wrapScript($ret2);  
 print $ret.$ret2;  

三、setJSONData()的高级形式
高级的原因是：后端不只是传来渲染图表（fusionCharts）的完整js，还包括其他值，此时$.post()的返回值是'json'类型。

    Php代码   
    
  
 //前端：  
 $.post(srcUrl,null,function(r){  
     console.log(r.v);  
     $(".outsource_content").html(r.g);  
 },'json');  
   
 //后端：  
 //在上面的基础上  
 $return = array('v'=>100,'g'=>$ret.$ret2);  