`
zccst
  • 浏览: 3322718 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

在php中使用FusionCharts

 
阅读更多
作者:zccst

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


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

一、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,可以直接丢一个data.xml格式的文件,也可以是一个url,该url的返回值是xml格式的数据。
批注2:有可能乱码。在yii中使用会乱码。但在extjs中没有。


二、setJSONData(jsonStr)
又分两种情况:
第一种情况是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'类型。


第二种情况是所有都在后端,前端直接$(".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:针对第二种情况,也可以显示两个图表,(当然也可以显示多个)
<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'类型。这个必须强调。


分享到:
评论

相关推荐

    fusioncharts

    在FusionCharts中,通过设置数据集和图表属性可以创建饼状图。数据集包含各部分的值,而属性可以设定图例、颜色、标签等。 4. **数据集的动态修改**:描述中提到统计图类型和数据集可根据实际情况修改,这意味着...

    FusionCharts

    在本压缩包中,包含了官方的FusionCharts Suite XT软件包以及一些示例文件,方便我们了解和学习如何使用FusionCharts。 `fusioncharts-suite-xt.zip`是FusionCharts的核心组件,包含了所有必要的JavaScript库、CSS...

    FusionCharts图表组件简单使用

    此外,不同类型的图表可能需要不同的数据源格式,因此在实际应用中,建议参考FusionCharts提供的文档和示例来适应具体需求。 总的来说,FusionCharts是一个强大且易于使用的图表组件,适用于快速构建具有吸引力的...

    使用fusioncharts实现数据库的动态数据交互.zip

    标题中的“使用FusionCharts实现数据库的动态数据交互”指的是使用FusionCharts这款JavaScript图表库与数据库进行数据通信,以实现在网页上展示动态、实时的图表数据。FusionCharts是一款强大的图表解决方案,它提供...

    FusionCharts_PHP_Class.zip

    标签"FusionCharts"则强调了主要的技术焦点,这涉及到使用FusionCharts库来创建各种类型的图表,如柱状图、饼图、线图、地图等,以便在Web应用程序中展示数据。 压缩包内的文件" FusionCharts_PHP_Class"可能是PHP...

    FusionCharts_API_中文帮助文件

    - 错误代码和消息:学习识别并解决FusionCharts API使用中的常见问题。 - 开发者工具:利用浏览器的开发者工具检查图表渲染和网络请求。 9. **示例与实战** - 示例代码:文档中包含大量示例代码,供学习和参考。...

    fusioncharts.dll文件

    标题中的"FusionCharts.dll"文件是FusionCharts Free软件的核心组件,这是一款强大的图表生成工具,专门用于在Web页面上创建交互式、视觉效果丰富的图表。这个控件以单一的动态链接库(DLL)文件形式提供,使得集成...

    FusionCharts 中文文档

    本中文文档主要介绍了如何在FusionCharts中实现图表的服务器端导出功能,包括PDF和图像格式。 1. **服务器端导出流程**: 当用户在图表上点击右键并选择导出选项时,图表的XML数据会发送到服务器。这个XML数据包含...

    FusionCharts文档

    在实际项目中,FusionCharts可以用于构建动态的数据仪表板,展示销售业绩、股票走势、用户行为分析等数据。例如,你可以创建一个时间序列的折线图来追踪销售额的变化,或者使用饼图展示各个部门的预算分配比例。借助...

    FusionCharts 插件及源码实例

    在“FusionChartsDemo”这个压缩包中,我们很可能会找到一系列示例代码和资源,这些资源将有助于我们了解和掌握FusionCharts的使用方法。以下是对FusionCharts及其应用实例的详细介绍: 1. **图表类型**:...

    FusionCharts使用文档

    FusionCharts Free的最新版本为v3.06,该版本针对不同平台和编程语言进行了优化和增强,包括新增JSP和Ruby on Rails的集成示例、改进的.NET使用代码和文档、更新的PHP API以及修复了一些已知问题。 FusionCharts...

    fusionCharts数据库取数展示

    在这个例子中,我们创建了一个名为`myChart`的FusionCharts实例,指定了图表类型(`type`)、渲染位置(`renderAt`)、宽度(`width`)、高度(`height`)、数据格式(`dataFormat`)以及数据源(`dataSource`)。 #### 四、...

    FusionCharts 帮助文档

    在FusionCharts的文档中,你会找到详细的安装指南,包括如何下载、解压和引入到项目中。对于初学者来说,这部分内容非常重要,因为正确的安装步骤是成功使用FusionCharts的第一步。文档通常会提供HTML示例代码,说明...

    FusionCharts 甘特图制作案例

    在FusionCharts中,我们可以创建一个XML文件,包含各个任务的开始日期、结束日期、持续时间等信息,然后在JavaScript代码中加载这个XML文件,FusionCharts会自动解析并渲染成甘特图。 接下来,"数据从数据库获取的...

    fusioncharts/3.3.1下载

    FusionCharts是一种制图组件,可以帮您为您的Web应用创建交互式的、数据驱动的图表、仪表盘和地图。它具有智能化、用户友好和创新等特点,可以将单调的数据转化为栩栩如生的图像,从而使您的Web应用更加的生动。它...

    FUSIONCHARTS XT API PHP CLASS

    FUSIONCHARTS XT API PHP CLASS 可以看看博客http://www.cnblogs.com/zhenghongxin/

    FusionCharts 及中文操作手册,帮助文档,参数说明

    3. **Fusionchart++Free%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.doc**:这是一个学习笔记文档,可能是一位用户在使用FusionCharts过程中整理的学习心得和技巧总结。 4. **FusionCharts参数说明.doc**:这份文档详细...

Global site tag (gtag.js) - Google Analytics