- 浏览: 132698 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
522823979:
JXL POI 导出excel 包括图片 -
贝塔ZQ:
实现导出excel文件和图片,感觉用poi和jxl代码量好多, ...
JXL POI 导出excel 包括图片 -
bmpbhg:
和你的类似,不过我这边报的是
org.dom4j.Docume ...
Servlet 接受解析HTTP请求XML数据,返回XML -
Wuaner:
引用Non Field Validators排在前面的先执行 ...
struts2 内建效验器 -
timelion:
请将正式简历发送至
timelion@163.com
找工作中...放上简历,求推荐
在前面的章节里,我们已经了解了图形的基本使用方法以及图形XML,现在我们已经有能力做出基本的图形了,如果你现在就把它应用到你的项目里,我认为没有任何问题,而且我也相信你还能举一反三地,发展出一些“新”的用法。
那我们就开始吧。
动态改变图形的类型
在项目中,我们有时会需要在页面上方便地改变图形的类型,当然,如果页面不刷新就能看到改变的结果,那是最理想的。举个例子来说,在一个页面上,显示了一个月销售额的柱状图,但用户要求还可以查看月销售额的饼图,区域图。要实现这个需求,一般的做法是,再做两个页面,一个显示饼图,一个显示区域图,用户想看这两个图,点击连接就可以了。这样的做法并没有什么不妥。你还可以采用AJAX技术,来实现页面无刷新,这样用户的体验会更好一些。只是程序员累一点而已。
难道我们一定要这么累吗?不!其实我们可以有更好的办法,前提是你采用了FCF作为你的报表解决方案。
那么,在FCF里,是怎么实现上面的需求的呢?简单点说,思路是这样的:
1、使用JavaScript加载第一个图形(如柱状图),至于是用dataXML方法,还是dataURL方法,都可以。
2、当需要改变图形类型(如改成饼图)时,我们再创建一个新的FusionCharts类实例(它的SWF文件是饼图),把它render到原来的DIV。
就是这么简单。
我们来看看代码吧。
上面的代码非常浅显,就不做解释了。
动态改变图形的数据我们已经会动态改变图形的类型了,动态改变数据和上面的原来一样,我们只需要在新建实例的时候,传入新的数据就可以了。
那么为什么还要单独来讲解这个呢?因为FCF给我们提供了一个更简单的方法,那就是updateChartXML(domid,data)。它的第一个参数就是我们在创建FusionCharts实例时设置的图形domid,第二个参数是XML数据字符。
来看看下面的代码。
当我们单击”改变数据“按钮后,会调用updateChart()方法,它会使用新的数据来重新构建图形。
这种方案看起来,好像是比较好。然而,在前面我们说了,使用dataXML方法加载数据时,不能含有中文字符,同理,使用updateChartXML方法,也不能有中文字符。如果你要使用中文,还是用第一种方法吧。你可能会想,既然有updateChartXML方法,那是不是有updateChartURL方法呢?我们用它不就可以了吗?是的,是有这个方法,不过,FusionCharts Free版本里没有,只有FusionCharts版本里有。想用吗?拿钱来!
下章我们来讲讲FCF的下钻图形,听上去很专业,其实就是图形的连接,包括超连接,JavaScript。
那我们就开始吧。
动态改变图形的类型
在项目中,我们有时会需要在页面上方便地改变图形的类型,当然,如果页面不刷新就能看到改变的结果,那是最理想的。举个例子来说,在一个页面上,显示了一个月销售额的柱状图,但用户要求还可以查看月销售额的饼图,区域图。要实现这个需求,一般的做法是,再做两个页面,一个显示饼图,一个显示区域图,用户想看这两个图,点击连接就可以了。这样的做法并没有什么不妥。你还可以采用AJAX技术,来实现页面无刷新,这样用户的体验会更好一些。只是程序员累一点而已。
难道我们一定要这么累吗?不!其实我们可以有更好的办法,前提是你采用了FCF作为你的报表解决方案。
那么,在FCF里,是怎么实现上面的需求的呢?简单点说,思路是这样的:
1、使用JavaScript加载第一个图形(如柱状图),至于是用dataXML方法,还是dataURL方法,都可以。
2、当需要改变图形类型(如改成饼图)时,我们再创建一个新的FusionCharts类实例(它的SWF文件是饼图),把它render到原来的DIV。
就是这么简单。
我们来看看代码吧。
<HTML> <HEAD> <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> //数据 var strXML = "<graph caption='Hours worked' showNames='1'> <set name='Tom' value='32' color='AFD8F8'/> <set name='Mary' value='16' color='F6BD0F'/><set name='Jane' value='42' color='8BBA00'/></graph>"; /* * 当用户单击按钮时调用这个方法。 * 这个方法用来使用新的SWF文件创建一个新的FusionCharts实例。 */ function updateChart(chartSWF){ //Create another instance of the chart. var chart1 = new FusionCharts(chartSWF, "chart1Id", "400", "300", "0", "0"); chart1.setDataXML(strXML); chart1.render("chart1div"); } </SCRIPT> </HEAD> <BODY> <div id="chart1div"> FusionCharts </div> <script language="JavaScript"> var chart1 = new FusionCharts("../../FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300", "0", "0"); chart1.setDataXML(strXML); chart1.render("chart1div"); </script> <form name='frmUpdate'> Show as: <input type='button' value='Column' onClick="javaScript:updateChart('../../FusionCharts/FCF_Column3D.swf');" name='btnColumn' /> <input type='button' value='Line' onClick="javaScript:updateChart('../../FusionCharts/FCF_Line.swf');" name='btnLine' /> <input type='button' value='Pie' onClick="javaScript:updateChart('../../FusionCharts/FCF_Pie3D.swf');" name='btnPie' /> </form> </CENTER> </BODY> </HTML>
上面的代码非常浅显,就不做解释了。
动态改变图形的数据我们已经会动态改变图形的类型了,动态改变数据和上面的原来一样,我们只需要在新建实例的时候,传入新的数据就可以了。
那么为什么还要单独来讲解这个呢?因为FCF给我们提供了一个更简单的方法,那就是updateChartXML(domid,data)。它的第一个参数就是我们在创建FusionCharts实例时设置的图形domid,第二个参数是XML数据字符。
来看看下面的代码。
<HTML> <HEAD> <TITLE>FusionCharts Free & JavaScript - Updating chart using setDataXML() Method</TITLE> <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function updateChart(DOMId){ updateChartXML(domId,"<graph><set name='A' value='32' /></graph>"); } </SCRIPT> </HEAD> <BODY> <div id="chart1div"> FusionCharts </div> <script language="JavaScript"> var chart1 = new FusionCharts("../../FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300"); chart1.setDataXML("<graph><set name='A' value='10' color='D64646' /><set name='B' value='11' color='AFD8F8' /></graph>"); chart1.render("chart1div"); </script> <form name='frmUpdate'> <input type='button' value='改变数据' onClick="javaScript:updateChart('chart1Id');" name='btnUpdate'> </form> </HTML>
当我们单击”改变数据“按钮后,会调用updateChart()方法,它会使用新的数据来重新构建图形。
这种方案看起来,好像是比较好。然而,在前面我们说了,使用dataXML方法加载数据时,不能含有中文字符,同理,使用updateChartXML方法,也不能有中文字符。如果你要使用中文,还是用第一种方法吧。你可能会想,既然有updateChartXML方法,那是不是有updateChartURL方法呢?我们用它不就可以了吗?是的,是有这个方法,不过,FusionCharts Free版本里没有,只有FusionCharts版本里有。想用吗?拿钱来!
下章我们来讲讲FCF的下钻图形,听上去很专业,其实就是图形的连接,包括超连接,JavaScript。
发表评论
-
基于wp_poll开发满意度调查
2010-12-03 10:23 1076最近换了公司,试用期给公司改造内部网. 试用wordpress ... -
png图片透明ie6解决
2010-11-17 16:31 903// 图片透明 function setPng(img, ... -
Jquery 应用收集
2010-07-14 09:49 17571.结合时间控件WdatePicker使用,根据radio值不 ... -
原生AJAX 实现级联select
2010-02-22 15:15 4069由于是在客户上的框架上做开发,因为是比较老的框架,ajax框架 ... -
JS知识
2010-02-05 13:19 894JavaScript节点操作DOMDocument属性和方法 ... -
CSS知识
2010-01-07 15:01 757虽然我不是美工,也不专门去学CSS,但是项目中遇到的一些技巧还 ... -
HTML
2009-12-04 14:54 8211.标签map-- 定义图像点击区域的集合 map 标签 m ... -
JS函数收集--001
2009-11-30 09:52 883记录下开发过程中常用到的JS问题 1. 直接获取对性属性, ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十四章--在JSP里使用FCF
2009-11-25 16:05 2002前面我们讲的例子里,都是采用HTML或JavaScript来显 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十三章--间断数据的处理
2009-11-25 16:00 1527有时候我们的数据并不是连续的,例如我们有一个反映每个月销售额的 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十二章--FCF中的特殊字符
2009-11-25 15:52 1639在FCF里,如果要在图形里用到一些特殊的字符,你就要对它进行编 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十一章--FCF中的基本数字格式
2009-11-25 15:51 1855在我们的报表里,经常要对数值进行一些格式化,如小数位,千分位等 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十章--FCF中的下钻
2009-11-25 15:46 1506在我们开发图形报表时,你可能会遇到这样的需求:用户要求点击柱状 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第八章--FusionCharts Free和组合图XML
2009-11-25 15:42 2910本章我们来看看什么是组合图形,以及它的XML是怎么写的。 什 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第七章--FusionCharts Free和XML
2009-11-25 15:40 2449FusionCharts使用XML来创建和控制图形。 数据类 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第六章--FusionCharts Free图形的基本元素
2009-11-25 15:38 2448在我们了解了FCF的各种使用方法以后,我们就会发现,其实我们要 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第五章--FusionCharts Free使用dataXML加载数据
2009-11-25 15:34 1919在前面的例子里,我们使用的数据都是一个单独的XML文件,它可以 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第四章--FusionCharts Free使用JavaScript加载图形
2009-11-25 15:32 2163在上篇文章里,我们做 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第三章--FusionCharts Free我的第一个图形
2009-11-25 15:30 2701在介绍完了FCF的下载安装以后,现在,我们终于要开始创建我们的 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第一章--FusionCharts Free介绍
2009-11-25 15:28 2015FusionCharts是InfoSoft Global公司的 ...
相关推荐
FusionCharts Free中文开发指南FusionCharts Free中文开发指南
FusionCharts Free则是FusionCharts提供的一个免费版本,虽然免费,功能依然强大,图形类型依然丰富。 不得不感叹技术发展的真快,99年的时候,flash刚刚在互联网上流行,那时还只是一个简单的动画软件,编程能力...
FusionCharts Free中文开发指南.doc
报表开发工具文档 FusionCharts Free
FusionCharts Free中文开发指南 (完全版)
FusionCharts Free中文开发指南
FusionCharts Free 中文 开发 指南
《FusionCharts Free中文开发指南》
描述了如何使用FCF,可以满足日常的图形开发需要。FCF的XML参考分为Single Series Charts、Multi-Series Charts、Stacked Charts等等好几部分,但是对于绝大部分应用来说,Single Series Charts就足够了。 Single ...
FusionCharts Free中文开发指南第二版
FusionCharts Free flash的报表教程
免费漂亮的Flash图形报表-FusionCharts Free V2.1
FusionCharts_free_中文开发指南.pdf 比jfreechart生成的图片要美观得多的图片!里面有详细的实例!