原創(chuàng)|其它|編輯:郝浩|2012-10-23 09:57:55.000|閱讀 1091 次
概述:如何在PHP中使用FusionCharts,主要說明setDataURL(srcUrl)和setJSONData(jsonStr)這兩種數據格式
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
數據格式有setDataURL(srcUrl)和setJSONData(jsonStr)兩種
fileUrl = '../path/to/xx.swf'; //swf文件路徑
srcUrl = '//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后就立即執(zhí)行了。
批注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);
批注1:100的位置可以放置任意負責的數據,而且還可以v1,v2等等。
批注2:此時$.post()的返回值是'json'類型。這個必須強調。
本站文章除注明轉載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:iteye博客