PHPでFusionChartsを使用する

php
で FusionCharts を使用する 著者: zccst

データ形式には setDataURL(srcUrl) と setJSONData(jsonStr) が含まれます。
の使用方法は公式のデモとドキュメントで詳しく説明されています。
実際のニーズでは、公式情報を直接参照することが非常に便利です。


fileUrl = '../path/to/xx.swf' //swf ファイルのパス
srcUrl = 'http://url?a=1&b=2';バックエンドからリクエストされた URL。

1. setDataURL(srcUrl) メソッド

//前端：
<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 で、データを直接スローできます。 .xml 形式のファイル、または URL を指定できます。URL の戻り値は xml 形式のデータです。
注2:文字化けする場合があります。 Yii で使用するとコードが文字化けします。しかし、extjsではそうではありません。


2. setJSONData(jsonStr)
2 つのケースがあります:
最初のケースは new FusionCharts( .. .) フロントエンドでは、バックエンド
から jsonStr のみが取得されます。 例:

//前端：
<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' 型です。


2 番目のケースは、すべてがバックエンドにあり、フロントエンドが直接 $(".outsource_content").html(r)

//前端：
<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: 2 番目のケースでは、2 つのチャートを表示することもできます (もちろん、複数のチャートを表示することもできます)

バックエンドは次を追加しています:

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

3. )
の高度な形式は、バックエンドがチャート (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」です。このことは強調しなければなりません。