- 浏览: 136390 次
- 性别:
- 来自: 杭州
-
文章分类
最新评论
-
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 1179最近换了公司,试用期给公司改造内部网. 试用wordpress ... -
png图片透明ie6解决
2010-11-17 16:31 940// 图片透明 function setPng(img, ... -
Jquery 应用收集
2010-07-14 09:49 18111.结合时间控件WdatePicker使用,根据radio值不 ... -
原生AJAX 实现级联select
2010-02-22 15:15 4150由于是在客户上的框架上做开发,因为是比较老的框架,ajax框架 ... -
JS知识
2010-02-05 13:19 961JavaScript节点操作DOMDocument属性和方法 ... -
CSS知识
2010-01-07 15:01 801虽然我不是美工,也不专门去学CSS,但是项目中遇到的一些技巧还 ... -
HTML
2009-12-04 14:54 8681.标签map-- 定义图像点击区域的集合 map 标签 m ... -
JS函数收集--001
2009-11-30 09:52 946记录下开发过程中常用到的JS问题 1. 直接获取对性属性, ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十四章--在JSP里使用FCF
2009-11-25 16:05 2049前面我们讲的例子里,都是采用HTML或JavaScript来显 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十三章--间断数据的处理
2009-11-25 16:00 1571有时候我们的数据并不是连续的,例如我们有一个反映每个月销售额的 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十二章--FCF中的特殊字符
2009-11-25 15:52 1681在FCF里,如果要在图形里用到一些特殊的字符,你就要对它进行编 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十一章--FCF中的基本数字格式
2009-11-25 15:51 1902在我们的报表里,经常要对数值进行一些格式化,如小数位,千分位等 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十章--FCF中的下钻
2009-11-25 15:46 1546在我们开发图形报表时,你可能会遇到这样的需求:用户要求点击柱状 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第八章--FusionCharts Free和组合图XML
2009-11-25 15:42 2948本章我们来看看什么是组合图形,以及它的XML是怎么写的。 什 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第七章--FusionCharts Free和XML
2009-11-25 15:40 2498FusionCharts使用XML来创建和控制图形。 数据类 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第六章--FusionCharts Free图形的基本元素
2009-11-25 15:38 2490在我们了解了FCF的各种使用方法以后,我们就会发现,其实我们要 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第五章--FusionCharts Free使用dataXML加载数据
2009-11-25 15:34 1969在前面的例子里,我们使用的数据都是一个单独的XML文件,它可以 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第四章--FusionCharts Free使用JavaScript加载图形
2009-11-25 15:32 2219在上篇文章里,我们做 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第三章--FusionCharts Free我的第一个图形
2009-11-25 15:30 2741在介绍完了FCF的下载安装以后,现在,我们终于要开始创建我们的 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第一章--FusionCharts Free介绍
2009-11-25 15:28 2063FusionCharts是InfoSoft Global公司的 ...
相关推荐
FusionCharts也提供了详细的API文档,方便开发者快速了解FCF动态改变图形的类型和数据的使用方法。 九、FCF中的下钻 FusionCharts提供了下钻功能,能够根据不同的数据生成不同的图表。FusionCharts也提供了详细的...
安装和使用FusionCharts Free相当简单,解压缩下载包后,您可以找到包含SWF图表文件、JavaScript文件、示例代码、图形示例和文档的各个文件夹。将SWF文件部署到您的Web应用中,利用JavaScript文件来便捷地嵌入图表到...
### FusionCharts Free中文开发指南知识点概述 #### 一、FusionCharts Free简介 - **定义与特点**:FusionCharts Free是一款跨平台、跨浏览器的Flash图表组件解决方案,支持多种编程环境,包括ASP.NET、ASP、PHP、...
《FusionCharts Free中文开发指南第二版》详细解析 **一、FusionCharts Free概览** FusionCharts Free是一款功能强大的免费Flash图形解决方案,适用于Web应用程序的报表制作。该工具支持多种图表类型,包括3D/2D...
《FusionCharts Free中文开发指南 (完全版)》是一份详尽的教程,旨在帮助开发者掌握FusionCharts Free这款强大的图表生成工具。FusionCharts Free是一款JavaScript库,它能够为Web应用程序提供丰富的交互式图表,...
### FusionCharts_Free中文开发指南知识点总结 #### 一、FusionCharts_Free简介 - **概述**:FusionCharts_Free是一款由InfoSoft Global公司提供的免费版图表组件,支持跨平台、跨浏览器的应用,适用于多种开发...
**FusionCharts Free中文开发指南** FusionCharts是一款强大的数据可视化工具,专为创建交互式图表和图形而设计。FusionCharts Free是其免费版本,适用于个人和非商业项目,提供了一系列基本图表类型,帮助开发者将...
FusionCharts Free的v2.1版本进行了多项改进,增加了对jsp和Ruby on Rails的支持,优化了FusionCharts DOM,更新了.NET的使用代码和文档,引入了新的PHP API并修复了部分BUG,同时改进了FusionCharts.js以支持双引号...
**FusionCharts Free中文开发指南**是一本专为开发者准备的详细教程,旨在帮助读者深入理解和熟练使用FusionCharts Free这款强大的图表库。FusionCharts是一款基于JavaScript和Flash的交互式图表解决方案,它能轻松...
FusionCharts Free V2.1是一款专为网页开发者设计的免费Flash图形报表工具,它能够帮助用户轻松创建出美观、互动且数据丰富的图表。这款软件以其出色的数据可视化能力,为网站和应用程序添加了动态和直观的展示效果...
最后,"第九章--动态改变图形的类型和数据"展示了如何在运行时改变图表的类型或更新其数据。这一特性使得FusionCharts Free能够适应用户交互和数据变化,增加了图表的动态性和实用性。 通过以上对各个章节的学习,...