在php中使用FusionCharts

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


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

一、setDataURL(srcUrl)方式

 //前端：
 <divid="outsource_sta_1"></div>
 varmyChart=newFusionCharts(fileUrl,"myChartId","600","500");
 myChart.setDataURL(srcUrl);
 myChart.render("outsource_sta_1");

 //后端：
 $xml="<chartpalette=\"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.="<setlabel=\"'m'.$i\"value=\"$i\"/>";
 }
 $xml.="</chart>";
 print$xml;

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


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

 //前端：
 <divid="outsource_sta_1"></div>
 $.post(srcUrl,null,function(r){
 varmyChart=newFusionCharts(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);
 printjson_encode($ret);

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


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

 //前端：
 <divid="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;

 publicstaticfunctionwrapScript($scripts){
 $html='<scripttype="text/javascript">';
 $html.="\n";
 $html.=$scripts;
 $html.="\n";
 $html.="</script>";
 return$html;
 }
 publicstaticfunctiongenerateChart($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}=newFusionCharts('{$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>
后端在添加：

 $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'类型。

 //前端：
 $.post(srcUrl,null,function(r){
 console.log(r.v);
 $(".outsource_content").html(r.g);
 },'json');

 //后端：
 //在上面的基础上
 $return=array('v'=>100,'g'=>$ret.$ret2);

批注1：100的位置可以放置任意负责的数据，而且还可以v1,v2等等。

批注2：此时$.post()的返回值是'json'类型。这个必须强调。