FusionCharts使用实例
FusionCharts是一套很有用的统计图生成工具,flash的,价格为4999美刀~不过免费版的和正式版的功能上没啥区别,就是头顶上多了一条公司广告,不过这也挺烦人的。没办法,咱们没美刀,又是良好村民,不敢用那个什么破解版,忍忍吧。
废话少说,先上图,下面图片就是FusionCharts的效果,很强吧,这只是其中一种效果,因为这里是图片,没法看到动画效果,不敢静态图也包不住他对人的吸引力啊。
免费版本可以到http://www.fusioncharts.com/Download.asp下载,解压后得到下面图片所示。
可以看看里面的示例,不过那也够啰嗦的,而且是洋文,所以还是看我的文章吧~我们只要Charts和JSClass两个文件夹就够了,当然JSClass里面就一个js文件而已,完全可以放到Charts文件夹里面。
OK,说一下FusionCharts大概的执行流程:
1.我们先从数据库取数据;
2.用php代码做一个生成xml的函数,把数据生成xml;
3.用一段js读取xml,送到FusionCharts,生成统计图表。
说起来还是挺烦琐的,所以还是开始做吧。这里要做两个函数,makexml(),render(),方便我们的调用。
view plaincopy to clipboardprint?
function makexml($data)
{
$strXML .= "";
foreach ($data as $k=>$v)
{
$strXML .= "<set name='".$v['Option']."' value='".$v['Num']."' />"; //省掉了color
}
return $strXML;
}
function makexml($data)
{
$strXML .= "";
foreach ($data as $k=>$v)
{
$strXML .= "<set name='".$v['Option']."' value='".$v['Num']."' />"; //省掉了color
}
return $strXML;
}
注意!FusionCharts根据生成统计表的不同分了两种xml格式,如下所示,大家可以参考Gallery/Data文件夹里面。。可能我说漏了也说不定。所以上面那个函数是对应生成第一种,另一种大家自行搞定~
view plaincopy to clipboardprint?
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0' chartRightMargin='30'>
<set name='Jan' value='462' color='AFD8F8' />
<set name='Feb' value='857' color='F6BD0F' />
<set name='Mar' value='671' color='8BBA00' />
<set name='Apr' value='494' color='FF8E46'/>
<set name='May' value='761' color='008E8E'/>
</graph>
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0' chartRightMargin='30'>
<set name='Jan' value='462' color='AFD8F8' />
<set name='Feb' value='857' color='F6BD0F' />
<set name='Mar' value='671' color='8BBA00' />
<set name='Apr' value='494' color='FF8E46'/>
<set name='May' value='761' color='008E8E'/>
</graph>
view plaincopy to clipboardprint?
<graph xaxisname='Continent' yaxisname='Export' hovercapbg='DEDEBE' hovercapborder='889E6D' rotateNames='0' yAxisMaxValue='100' numdivlines='9' divLineColor='CCCCCC' divLineAlpha='80' decimalPrecision='0' showAlternateHGridColor='1' AlternateHGridAlpha='30' AlternateHGridColor='CCCCCC' caption='Global Export' subcaption='In Millions Tonnes per annum pr Hectare' >
<categories font='Arial' fontSize='11' fontColor='000000'>
<category name='N. America' hoverText='North America'/>
<category name='Asia' />
<category name='Europe' />
<category name='Australia' />
<category name='Africa' />
</categories>
<dataset seriesname='Rice' color='FDC12E'>
<set value='30' />
<set value='26' />
<set value='29' />
<set value='31' />
<set value='34' />
</dataset>
<dataset seriesname='Wheat' color='56B9F9'>
<set value='67' />
<set value='98' />
<set value='79' />
<set value='73' />
<set value='80' />
</dataset>
<dataset seriesname='Grain' color='C9198D' >
<set value='27' />
<set value='25' />
<set value='28' />
<set value='26' />
<set value='10' />
</dataset>
</graph>
<graph xaxisname='Continent' yaxisname='Export' hovercapbg='DEDEBE' hovercapborder='889E6D' rotateNames='0' yAxisMaxValue='100' numdivlines='9' divLineColor='CCCCCC' divLineAlpha='80' decimalPrecision='0' showAlternateHGridColor='1' AlternateHGridAlpha='30' AlternateHGridColor='CCCCCC' caption='Global Export' subcaption='In Millions Tonnes per annum pr Hectare' >
<categories font='Arial' fontSize='11' fontColor='000000'>
<category name='N. America' hoverText='North America'/>
<category name='Asia' />
<category name='Europe' />
<category name='Australia' />
<category name='Africa' />
</categories>
<dataset seriesname='Rice' color='FDC12E'>
<set value='30' />
<set value='26' />
<set value='29' />
<set value='31' />
<set value='34' />
</dataset>
<dataset seriesname='Wheat' color='56B9F9'>
<set value='67' />
<set value='98' />
<set value='79' />
<set value='73' />
<set value='80' />
</dataset>
<dataset seriesname='Grain' color='C9198D' >
<set value='27' />
<set value='25' />
<set value='28' />
<set value='26' />
<set value='10' />
</dataset>
</graph>
接下来是render()函数。
view plaincopy to clipboardprint?
function render($caption, $XAxisName, $chartSWF, $XML, $chartId='char', $chartWidth=265, $chartHeight=200, $debugMode=false, $registerWithJS=true)
{
//animation=1: 开启flash,0:关闭flash效果 caption:表头标题 XAxisName:x轴标题 decimalPrecision:坐标显示小数位数 baseFontSize:字体大小 formatNumberScale:格式化坐标 numberPrefix:在数值前面加符号 showValues:显示数值
$strXML = "<graph caption='$caption' XAxisName='$XAxisName' palette='2' decimalPrecision='0' baseFontSize='12' animation='1' formatNumberScale='1' numberPrefix='' showValues='0' >";
$strXML .= $XML;
$strXML .= "</graph>";
$tempData = "//Provide entire XML data using dataXML methodnttchart_$chartId.setDataXML("$strXML");";
// Set up necessary variables for the RENDERCAHRT
$chartIdDiv = $chartId . "Div";
$ndebugMode = boolToNum($debugMode);
$nregisterWithJS = boolToNum($registerWithJS);
// create a string for outputting by the caller
$render_chart = "
<!-- START Script Block for Chart $chartId -->
<div id='$chartIdDiv' align='center'>
Chart.
</div>
<mce:script type="text/javascript"><!--
//Instantiate the Chart
var chart_$chartId = new FusionCharts("Charts/$chartSWF", "$chartId", "$chartWidth", "$chartHeight", "$ndebugMode", "$nregisterWithJS");
$tempData
//Finally, render the chart.
chart_$chartId.render("$chartIdDiv");
// --></mce:script>
<!-- END Script Block for Chart $chartId -->";
return $render_chart;
}
function render($caption, $XAxisName, $chartSWF, $XML, $chartId='char', $chartWidth=265, $chartHeight=200, $debugMode=false, $registerWithJS=true)
{
//animation=1: 开启flash,0:关闭flash效果 caption:表头标题 XAxisName:x轴标题 decimalPrecision:坐标显示小数位数 baseFontSize:字体大小 formatNumberScale:格式化坐标 numberPrefix:在数值前面加符号 showValues:显示数值
$strXML = "<graph caption='$caption' XAxisName='$XAxisName' palette='2' decimalPrecision='0' baseFontSize='12' animation='1' formatNumberScale='1' numberPrefix='' showValues='0' >";
$strXML .= $XML;
$strXML .= "</graph>";
$tempData = "//Provide entire XML data using dataXML methodnttchart_$chartId.setDataXML("$strXML");";
// Set up necessary variables for the RENDERCAHRT
$chartIdDiv = $chartId . "Div";
$ndebugMode = boolToNum($debugMode);
$nregisterWithJS = boolToNum($registerWithJS);
// create a string for outputting by the caller
$render_chart = "
<!-- START Script Block for Chart $chartId -->
<div id='$chartIdDiv' align='center'>
Chart.
</div>
<mce:script type="text/javascript"><!--
//Instantiate the Chart
var chart_$chartId = new FusionCharts("Charts/$chartSWF", "$chartId", "$chartWidth", "$chartHeight", "$ndebugMode", "$nregisterWithJS");
$tempData
//Finally, render the chart.
chart_$chartId.render("$chartIdDiv");
// --></mce:script>
<!-- END Script Block for Chart $chartId -->";
return $render_chart;
}
接下来就到了调用过程,简单的几句话,假设数据放在$result数组里。
view plaincopy to clipboardprint?
foreach ($results as $key => $value) {
$arr[] = array('Option'=>$value['name'],'Num'=>$value['num']);
}
$xml = makexml($arr);
$fusionchart = 'Pie3D.swf';
$output = render($title,'',$fusionchart,$xml,$id);//每个图的id要不一样的,一样的话就。。。
foreach ($results as $key => $value) {
$arr[] = array('Option'=>$value['name'],'Num'=>$value['num']);
}
$xml = makexml($arr);
$fusionchart = 'Pie3D.swf';
$output = render($title,'',$fusionchart,$xml,$id);//每个图的id要不一样的,一样的话就。。。
最后在html加入js文件调用代码,把$output打印出来就搞定了~
view plaincopy to clipboardprint?
<mce:script type="text/javascript" src="tool/admin/vendors/FusionCharts/FusionCharts.js" mce_src="tool/admin/vendors/FusionCharts/FusionCharts.js"></mce:script>
<?php echo $output ?>
<mce:script type="text/javascript" src="tool/admin/vendors/FusionCharts/FusionCharts.js" mce_src="tool/admin/vendors/FusionCharts/FusionCharts.js"></mce:script>
<?php echo $output ?>
收工!
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/daguigto/archive/2009/08/27/4490902.aspx
FusionCharts使用实例相关推荐
- 前端开发基础知识汇总
一.HTML 1.前言与常用标签 浏览器 内核 备注 IE Trident IE.猎豹安全.360极速浏览器.百度浏览器 firefox Gecko 可惜这几年已经没落了,打开速度慢.升级频繁.猪一样 ...
- Spring Cloud微服务系统架构的一些简单介绍和使用
Spring Cloud 目录 特征 云原生应用程序 Spring Cloud上下文:应用程序上下文服务 引导应用程序上下文 应用程序上下文层次结构 改变Bootstrap的位置Properties ...
- fusioncharts java_FusionCharts 导出图片实例 java版 | 学步园
因为项目需要,需要使用FusionCharts进行导出. 下面就是自己写得例子. 这个是就是FusionCharts的Readme.txt中提示的导出步骤 FusionCharts服务器端输出处理程序 ...
- java fusioncharts_Java FusionCharts实例 柱状图
jsp 页面 : 工作订单计划完成情况统计 request.setCharacterEncoding("UTF-8"); %> var chart = new FusionC ...
- FusionCharts下载地址汇总及更新介绍
本文主要整理了近3年来FusionCharts图表的历史版本下载地址,共享给大家.>>>下载最新版本FusionCharts v3.2.2-SR5 >>>Fusio ...
- Fusioncharts图表组件API参考方法(Functions)汇总篇(续)
[摘要]: chartType()FusionCharts的JavaScript类API提供了大量的功能.下面的列表显示在每个功能的详细信息: 一.FusionCharts的类 - 实例功能 1.co ...
- fusioncharts生成图表flash遮挡页面中元素的情况
fusioncharts生成图表flash遮挡页面中元素的情况 在做web开发中遇到fusioncharts生成图表flash遮挡页面中元素的情况,无论怎么设置flash容器和层的深度(z-index ...
- fusioncharts的属性介绍
参考以下的属性设置结合前面讲的实例用fusioncharts来进行简单的画图表显示是没有问题的了.如下就是有关fusioncharts的一些属性: FusionCharts的XML标签属性有以下四种数 ...
- FusionCharts绘图插件详解
目前在做项目完成数据统计,需要将统计数据进行图形化分析.将数据做成各种图表,即柱状图和折线图,由此接触了FusionCharts绘图插件,经过查询资料和做Demo,将项目功能完成,特此总结以备将来查阅 ...
最新文章
- vue缓存页面【二】
- 【leetcode】85. Maximal Rectangle 0/1矩阵的最大全1子矩阵
- 一步一步SharePoint 2007之三十七:在SharePoint中实现Workflow(3)——运行Workflow
- 通过微软的cors类库,让ASP.NET Web API 支持 CORS
- 相关方登记册模板_项目的主要相关方
- 整理计算机网络参考模型知识
- DNS 流程说明以及相关问题的解析
- Java集合篇:HashMap 与 ConcurrentHashMap 原理总结
- Aspx 页面生命周期
- 51nod 1379 索函数
- 入行||转行软件测试?写给迷惘的你
- java 静态内部类 内部类_Java中内部类和静态内部类的区别
- 1000mx3连电脑没声音_Mac电脑没声音了怎么办?解决Mac上声音问题
- unity3D的FingerGestures插件详细说明
- 引用启动类型“WebService.Startup”的 OwinStartup 属性 冲突
- 公共数据库介绍~OECD经合组织数据库
- Ubuntu 404 Not Found [IP: 91.189.95.85 80]解决办法
- 自动化测试之-测试用例设计方法总结
- base64加密原理详解
- jQuery动画序列