在PHP中使用FusionCharts

原创|其它|编辑:郝浩|2012-10-23 09:57:55.000|阅读 886 次

概述:如何在PHP中使用FusionCharts,主要说明setDataURL(srcUrl)和setJSONData(jsonStr)这两种数据格式

# 31款JAVA开发必备控件和工具 # 开发软/控件产品年终优惠

数据格式有setDataURL(srcUrl)和setJSONData(jsonStr)两种

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);

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

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


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:iteye博客

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们

客服热线
400-700-1020

QQ客服

意见反馈


添加微信获专业服务

TOP
在线客服系统
live chat