FusionCharts图表插件开发教程

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,FusionCharts,图表插件开发教程,目录,FusionCharts,Free,介绍,FusionCharts,Free,安装,FusionCharts,Free,我的第一个图形,FusionCharts,Free,使用,JavaScript,加载图形,FusionCharts,Free,使用,dataXML,加载数据,FusionCharts,Free,图形的基本元素,FusionCharts,Free,和,XML,FusionCharts,Free,和组合图,XML,动态改变图形的类型和数据,FCF,中的下钻,FCF,中的基本数字格式,FCF,中的特殊字符,间断数据的处理,在,JSP,里使用,FCF,FusionCharts,Free,介绍,FusionCharts,是,InfoSoft Global,公司的一个产品，,InfoSoft Global,公司是专业的,Flash,图形方案提供商，他们还有几款其他的，基于,Flash,技术的产品，都非常的漂亮。,FusionCharts,Free,则是,FusionCharts,提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。,不得不感叹技术发展的真快，,99,年的时候，,flash,刚刚在互联网上流行，那时还只是一个简单的动画软件，编程能力有限。但现在,flash,几乎无所不能了，图形报表则是它大展手脚的一个领域。,FusionCharts,free,是一个跨平台，跨浏览器的,flash,图表组件解决方案，能够被,ASP.NET, ASP, PHP, JSP,ColdFusion, Ruby on Rails,简单,HTML,页面甚至,PPT,调用。你不需要知道任何关于,flash,编程的知识，你只需要知道你所用的编程语言就可以了。,FusionCharts,Free,安装,下载,你可以在下面的地址下载它。将,FusionCharts,Free,（以下简称,FCF,）解压到任意一个目录后，点击目录下的,index.html,，就可以打开,FCF,的文档。,这份文档我们的网站上也有，地址是,http:/,ajava.org/demo/fusionchartsfree,/,。,目录结构,现在我们就来看看这个下载包里面都有些什么东西。,SWF,文件,（创建图形主要靠它们了）所有的,SWF,文件（共,22,个）都在,FusionChartsFree,Charts,文件夹。如果你需要在你的,web,应用里创建图形，那么就把这些,SWF,文件都拷到你的应用下面。,FusionCharts,JavaScript,文件,FusionCharts,JavaScript,文件放在,FusionChartsFree,JSClass,文件夹。这些文件能够帮你用一种友好的方式把图形嵌入到,html,页面。,示例代码,所有的代码都放在,FusionChartsFree,Code,文件夹。,图形例子,我们创建了一些图形例子，放在,FusionChartsFree,Gallery,文件夹。你也可以通过文档左边的菜单,Sample Charts,来访问它。,文档,文档就放在,FusionChartsFree,Contents,文件夹，你可以直接点击,FusionChartsFree,下面的,index.html,来访问。,安装,了解了下载包的目录结构以后，我们再来看看如何安装,FCF,到,web,应用里。,只需要两个步骤即可完成安装。,1,、在你的,web,应用根目录下新建一个叫,FusionCharts,的文件夹。当然，并不是说它一定要叫这个名字，也不是一定要在根目录下。,2,、把所有的,SWF,文件都拷贝到这个,FusionCharts,里。,这就完成安装了，不再需要其他多余的步骤。,当然，有些情况下，并不需要与服务器的交互（比如，你直接使用,JavaScript,来嵌入，而不用,jsp,或,php,。数据也是直接写死在你的,JavaScript,代码里或,xml,文件里。），为了学习方便，你也可以把它安装在你的电脑上随便一个地方，比如,d:test,下。安装步骤和上面的安装一样。,FusionCharts,Free,我的第一个图形,要使用,FCF,来创建图形，你需要做下面三件事情：,1.,选择好你要创建的图形类型对应的,SWF,文件。例如，我们现在要创建的是,3D,柱状图形，那么我们的,SWF,文件就是,FCF_Column3D.swf,。上篇文章已经介绍过了，所有的,SWF,文件都放在,FusionChartsFree,Charts,文件夹里。,2.XML,数据文件。,FCF,只接受基于,XML,格式的数据。因此，你需要把你的数据转成,XML,格式。,3.HTML,文件。这个,HTML,文件将包含用来嵌入图形的代码。在我们进行上面的工作之前，我们先要新建一个文件夹。例如，我们创建一个叫,c:FusionCharts,的文件夹。以后我们的例子都放到这个里面。对于我们的第一个例子来说，我们将在,c:FusionCharts,下再建一个叫,MyFirstChart,的文件夹。,设置,SWF,文件,我们还要在,c:FusionCharts,下建一个叫,FusionCharts,的文件夹。现在，我们把所有的,SWF,文件都拷贝到到这个文件下面（,c:FusionChartsFusionCharts,）。以后，我们所有例子的代码，都要引用这个文件夹下面的,SWF,文件。好了，,SWF,文件就设置好了。,创建,XML,数据文档,要做报表，当然要有数据了。在这个例子里，我们准备展示一年里每个月的销售情况。所有数据看起来就像下面的表格中的一样。,我们知道，,FCF,只接受,XML,格式的数据，其他如,Excel,，,CSV,，,text,等都不行。,现在我们按照上表中的数据，做成一个叫,Data.xml,的,XML,文件，保存在,c:FusionChartsMyFirstChart,文件夹下。这个文件的内容如下：,.,上面的代码里，有一个叫,的,root,元素，它还有一些属性，用来定义标题，坐标轴，数值格式。我们还看到有很多,元素，它用来描述数据。,name,属性用来表示月份名称，,value,属性表示销售额，,color,属性表示图形颜色。,创建包含图形的,HTML,文件,每个图形都要被放到,HTML,文件里才能显示，现在，我们把下面的代码保存,c:FusionChartsMyFirstChartChart.html,文件里。,MyFirst,FusionCharts,上面的代码，其实就是一个显示,flash,的简单标记。,movie,参数值指定我们的,SWF,文件，即,FCF_Column3D.swf,。,FlashVars,参数值用来指定,XML,文件的路径以及图形的宽和高。看到这里，如果不熟悉在网页里调用,Flash,的朋友，可能会有点迷惑，因为我们发现有一个,embed,参数，它的各个值都和,param,参数的值是一样的，为什么会这样呢？其实，这是为了在不同的浏览器里都能运行,Flash,的一个解决办法。,IE,浏览器是使用,param,参数来运行,Flash,的，而,Netscape,则是使用,embed,参数来运行,Flash,。因此，为了保证我们的应用能够在大多数浏览器上运行，我们就需要加上,embed,参数，并且值和,param,完全相同。,好了，所有工作都做完了，现在，你可以用,IE,打开,Chart.html,，就能看到你的第一个漂亮的,Flash,图形了。,问题,如果你很不幸，没有在页面上看到图形，那么可能是下面的原因之一：,1.SWF,没有放到正确的文件夹。,2.,在,Chart.html,里，,SWF,的路径设置不正确。,3.,没有安装,Flash Player,。,4.,没有启用浏览器,Flash,播放选项。,如果你得到了一个“,Error in Loading Data”,的消息，可能是：,1.Data.xml,文件没放到正确的文件夹。,2.Data.xml,的文件名不正确。比如，你可能不小心把它命名为,Data.xml.txt,。,如果你得到了一个“,Invalid XML Data”,的消息，可能是,;1.Data.xml,里的内容有错误。,到这里，第一个图表就做完了，感觉怎么样？你是觉得简单呢，容易呢，还是小,Case,呢？,不过，这里我有个小问题，就是,Data.xml,里，,yAxisName,属性如果是中文的话，显示不出来。希望随着教程的继续，我进一步了解,FCF,以后，可以解决这个小问题，也许它就是,BUG,。,图形转换,上面的图形是一个柱形图，如果我们想用同样的数据，以饼图来展示，我们只需要将,Chart.html,代码中的“,FCF_Column3D.swf”,改成饼图的,SWF,文件就可以了，即“,FCF_Pie3D.swf”,。现在我们再刷新浏览器，看看效果：,FusionCharts,Free,使用,JavaScript,加载图形,在上篇文章里，我们做出了第一个图形报表，我们是直接在,HTML,里使用,和,标记来加载图形的。,.,.,实际上，我们还可以使用,FCF,提供的一个,JavaScript,类来加载图形。使用,JavaScript,的方式有几个好处，一是代码量大大减少，特别是当一个页面上有几个图形时。二是代码更加直观。三是可以避免,IE,出现“单击以激活使用这个控件”的提示。,使用,JS,加载,这个,JS,类文件就在,FusionChartsFree,JSClass,文件夹下，我们把它拷贝到,c:FusionChartsFusionCharts,下面。现在，我们把原来的,Chart.html,复制一份，命名为,JSChart.html,。这样做是为了避免直接在,Chart.html,上进行修改，因为以后还要用到,Chart.html,，下面就是,JSChart.html,的代码。,图形将出现这个,DIV,里，到时这里的字将被图形替代。,var,myChart,=newFusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId,600,500);,myChart.setDataURL(Data.xml,);,myChart.render(chartdiv,);,我们对上面的代码进行以下解释。首先，我们用下面的语句来加载,FusionCharts.js,文件。,然后，我们定义了一个,DIV,，它还有个,id,。,图形将出现这个,DIV,里，到时这里的字将被图形替代。,我们的图形就出现在这个,DIV,里。接着，我们用四个参数建立了一个,FusionCharts,对象，,var,myChart,=newFusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId,600,500);,第一个参数是,SWF,文件的地址。第二个是图形的,id,。这个,id,你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个,id,一定要是唯一的。第三个参数是图形的宽。第四个参数是图形的高。我们还要设置数据文件的地址。,myChart.setDataURL(Data.xml,);,最后，我们把图形渲染在指定的地方。,myChart.render(chartdiv,);,chartdiv,就是前面的,DIV,的,id,，这就表示把图形,render,到,chartdiv,。,现在你运行,JSChart.html,，你会看到同,Chart.html,一样的效果。很显然使用,JavaScript,加载图形，更方便，更直观。,多图形,有时候我们需要在一个页面里显示多个图形，例如，我们同时以饼图、柱状图、曲线图、区域图四中形式来表现每个月的销售情况，让用户想看哪个就看哪个。,多图形,FirstChartContainerPie3D,var,myChart1=newFusionCharts(./FusionCharts/FCF_pie3D.swf,myChartId1,600,400);,myChart1.setDataURL(Data.xml);myChart1.render(chartdiv1);,SecondChartContainerColumn3D,var,myChart2=newFusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId2,600,300);,myChart2.setDataURL(Data.xml);myChart2.render(chartdiv2);,ThirdChartContainerLine2D,var,myChart3=new,FusionCharts(./FusionCharts/FCF_line.swf,myChartId3,600,300);,myChart3.setDataURL(Data.xml);myChart3.render(chartdiv3);,FourthChartContainerArea2D,var,myChart4=newFusionCharts(./FusionCharts/FCF_area2D.swf,myChartId4,400,250);,myChart4.setDataURL(Data.xml); myChart4.render(chartdiv4);,仔细对比上面的四个图形代码，其实就是,div,的,id,，,FusionCharts,对象的名称,图形的,id,，还有图形的,SWF,地址这些地方发生了变化。最后的效果如下：,使用,dataXML,提供数据,dataXML,和,dataURL,都可以提供数据，,dataURL,是以把,XML,文件地址以,URL,的形式告诉,FCF,，如一个静态的文件,Data.xml,，或者是一个动态的文件，如,mydata.jsp,（页面返回,XML,格式的文本）。,dataXML,则是以,XML,文本的形式告诉,FCF,。可能有点不好理解，看看下面的代码就知道了。,param,name=,FlashVars,value=&,dataXML,=,embed,src,=./FusionCharts/FCF_Column3D.swf?chartWidth=600&chartHeight=500,flashVars,=&,dataXML,=quality=highwidth=600height=500name=Column3Dtype=application/x-shockwave-flash,pluginspage,=http:/,/,我们把上面的代码保存到一个叫,ChartDataXML.html,的文件里。,可以看到，,FlashVars,的值是这样的一种形式：,在,EMBED,标记里，是这样的：,而原来我们放到,FlashVars,的两个参数,-,chartWidth,，,chartHeight,，则被放到了,SWF,文件地址的后面。,使用,JavaScript,和,dataXML,ThechartwillappearwithinthisDIV.Thistextwillbereplacedbythechart.,var,myChart,=newFusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId,600,500);,myChart.setDataXML,();,myChart.render(chartdiv,);,原来我们调用的是,setDataURL,(),方法，而现在是,setDataXML,(),方法，它的参数则是一个完整的,XML,字符串。,不管我们使用什么方法，我们都能得到一样的结果。,setDataXML,(),方法的问题,我们知道，在使用,GET,方法得到参数时，浏览器对参数值的长度是有一定的限制的，所以，如果,XML,字符过长，可能会产生问题。这时我们就需要使用,setDataURL,(),方法。,如果你的,XML,字符里含有双字节字符，例如中文字符，你就不能使用,setDataXML,(),方法，你应该使用,setDataURL,(),方法。,最佳模式,在我们的实际应用里，数据不可能是静态的，它可能是有用户选择查询条件，然后提交给服务器，服务器返回一个查询的结果，比如,search.jsp?year,=2008,。所以我给大家推荐的最佳模式是使用,setDataURL,(),方法，并且使用,JavaScript,来加载图形。,在使用,setDataURL,(),方法时，如果地址里含有“,?”,、“,&”,等字符，你就需要对这个地址进行,URL,编码。在,JavaScript,里进行编码，使用,escape(url,),这个函数。如果你想在服务器端就进行编码，那就使用你的编程语言提供的,URL,编码方法。在,java,里进行编码的函数是,.URLEncoder.encode,(),。,FusionCharts,Free,图形的基本元素,图形背景和画布,对于,3D,图形，你可以设置,canvas background,（画布背景）和,Chart Background,（图形背景）的颜色，还可以设置它们是否可见。,对于,2D,图形，你可以设置,canvas background color,（画布背景颜色），,background alpha,（背景透明度），,canvas border color,（画布边框颜色），,canvas border thickness,（画布边框厚度）等属性。,Chart Labels,（图形标签）,你可以设置,caption,（标题）, sub caption,（子标题）, x-axis name,（,X,轴标签）, y-axis name,（,Y,轴标签）, y-axis max limit,（,Y,轴最大值），,y-axis min limit,（,Y,轴最小值）, number Prefix,（数值前缀）, number Suffix,（数值后缀），,Chart Legend,（图例）。,DIV lines,（刻度线）,你可以设置,Trend Line,（趋势线），,Zero Plane,（零平面），,Div Line,（刻度线）等的一些属性。,Alternating,（间隔色）,你可以设置,Alternating Colored Horizontal Grids,（垂直表格间隔色）以及透明度，,Alternating Colored Vertical Grids,（水平表格间隔色）以及透明度。,Hover Caption,（提示信息）,你可以设置,hover caption background-,提示框的背景，,hover caption border,提示框的边框，,hover caption data separator character-,提示信息的分割字符。,Anchors,（锚点）,你可以设置,Anchors,（锚点）的,shape,（形状）, radius,（半径）, border color,（边框颜色）, thickness,（边框厚度）, alpha,（边框透明度）, background color,（背景颜色）, background alpha,（背景透明度） 等属性。,FusionCharts,Free,和,XML,数据类型,在,FCF,里，一共有四种数据类型。,Boolean -,它的值为,0,或,1,，,1,表示,true,，,0,表示,false,。例如,。,Number -,它的值应该是一个数值。例如,。,String -,它的值是一个字符串。例如,。,Hex Color Code -,它表示一个,16,进制的颜色，不需要用“,#”,。例如,。每个图形都有很多属性，我们都可以通过,XML,对它进行设置，但是，我们并不需要对每一个属性都进行设置，因为它们都有一个默认值，如果我们没有设置，,FCF,会使用默认值来替代。,FCF,里有几种类型的,XML,结构：,单系列图形,单系列图形是指只有一个数据集的图形。例如，我们的第一个例子，每月销售情况 ，就是一个单系列图形（我们只有一年的数据）。我们并没有对数据进行比较，例如，比较两年的每月销售情况。我们看看下面的例子。,上面的代码里多了一些我们没接触过的属性，没关系，在图形,XML,参考一章我们将详细介绍所有的图形可用的属性。下面进行一下简单的解释,元素是所有,FCF XML,文档的主元素。它描述数据的开始和结束。它还有一些属性可以控制图形。这些属性我们在图形,XML,参考一章会讲到。,元素是,的子元素，它描述一个数据集，这个数据集决定了图形上的数据。一个典型的,元素看起来就像这样：,元素，它可以在图形上画出一条趋势线。例如，下面的代码里，我们在,26000,这个值画出了一条线，用来表示月平均销售额。,多系列图形,多系列图形被用来比较两个或更多的数据集。我们看看下面的代码。, , , , , , ,我们发现，上面多了一个,元素，它包含很多的子元素，如,每个,就表示,X,轴上的一个名称。上面还有两个,元素，一个用来表示,2006,年的数据，一个表示,2005,年。每个,则表示图形上的一个数据。注意,的子元素的数量应该和,子元素的一致。下一章我们来看看组合图的,XML,。,FusionCharts,Free,和组合图,XML,什么是组合图形,当我们想在一张图形里表示多个图形类型时，我们就要用到组合图。,FCF,提供了双,Y,轴组合图，它有两个,Y,轴，每个轴表示不同的刻度（例如，收益和数量，或者访问量和下载量等等。）。图形左边的坐标轴叫主坐标轴，图形右边的叫次坐标轴。,FCF,里组合图分为,2D,和,3D,，下面的图形就是一个,2D,双,Y,轴组合图。,这个图里有月销售额和数量，,X,轴表示月份。现在我们来看看这两个,Y,轴：主,Y,轴表示,2005,和,2006,的销售额，柱状图和这个主,Y,轴对应。次,Y,轴表示数量，曲线图和次,Y,轴对应。在双,Y,轴图形里，我们必须提供至少两个数据集，一个对应主,Y,轴，一个对应次,Y,轴。如果你没有提供两个，图形就不会正确显示。,代码,上图的,XML,代码如下：, , , , , , , , , , ,简单解释,这个组合图的,XML,和一个多系列图形的,XML,较为类似，因此，我们只解释以下不同的地方。在双,Y,轴组合图里，有两个,Y,轴，每个,Y,轴都可以有它自己的刻度和数值格式属性。,PYAxisName,表示主轴的名称，,SYAxisName,表示次轴的名称。在每个数据集里，我们都必须用,parentYAxis,属性来指定它是属于哪个轴。这个属性的值只能是“,P”,或“,S”,。,P,代表主轴，,S,代表次轴。例如我们的代码里，在主轴上有两个销售额数据集,-“2005”,和“,2006”,：,.,在次轴上有一个数量数据集：,上面的例子里，数量数据集表示的是,2005,和,2006,当月数量的总数。实际上，我们可以在次轴上也设置两个数据集，一个表示,2005,年每月的数量，一个表示,2006,年的。大家可以自己练习一下。,注意,在运行这个例子是，,Flash,文件应该使用,FCF_MSColumn2DLineDY.swf,，从上图我们可以看出，它是,column,和,line,的组合，因此要用,FCF_MSColumn2DLineDY.swf,。更多的图形和,Flash,文件的对应关系，请参见,http:/ajava.org/hot/fusioncharts/816.html,动态改变图形的类型,在项目中，我们有时会需要在页面上方便地改变图形的类型，当然，如果页面不刷新就能看到改变的结果，那是最理想的。举个例子来说，在一个页面上，显示了一个月销售额的柱状图，但用户要求还可以查看月销售额的饼图，区域图。要实现这个需求，一般的做法是，再做两个页面，一个显示饼图，一个显示区域图，用户想看这两个图，点击连接就可以了。这样的做法并没有什么不妥。你还可以采用,AJAX,技术，来实现页面无刷新，这样用户的体验会更好一些。只是程序员累一点而已。难道我们一定要这么累吗？不！其实我们可以有更好的办法，前提是你采用了,FCF,作为你的报表解决方案。那么，在,FCF,里，是怎么实现上面的需求的呢？简单点说，思路是这样的：,1,、使用,JavaScript,加载第一个图形（如柱状图），至于是用,dataXML,方法，还是,dataURL,方法，都可以。,2,、当需要改变图形类型（如改成饼图）时，我们再创建一个新的,FusionCharts,类实例（它的,SWF,文件是饼图），把它,render,到原来的,DIV,。就是这么简单。,我们来看看代码吧。,/,数据,var,strXML,=,;,/*,*,当用户单击按钮时调用这个方法。,*这个方法用来使用新的,SWF,文件创建一个新的,FusionCharts,实例。,*,/,function,updateChart(chartSWF,),/Createanotherinstanceofthechart.,var,chart1=new,FusionCharts(chartSWF,chart1Id,400,300,0,0);,chart1.setDataXML(strXML);,chart1.render(chart1div);,FusionCharts,var,chart1=newFusionCharts(././FusionCharts/FCF_Column3D.swf,chart1Id,400,300,0,0);,chart1.setDataXML(strXML);,chart1.render(chart1div);,Showas:,动态改变图形的数据,我们已经会动态改变图形的类型了，动态改变数据和上面的原来一样，我们只需要在新建实例的时候，传入新的数据就可以了。那么为什么还要单独来讲解这个呢？因为,FCF,给我们提供了一个更简单的方法，那就是,updateChartXML(domid,data,),。它的第一个参数就是我们在创建,FusionCharts,实例时设置的图形,domid,，第二个参数是,XML,数据字符。来看看下面的代码。,FusionCharts,Free&JavaScript-Updatingchartusing,setDataXML,()Method,function,updateChart(DOMId,),updateChartXML(domId,);,FusionCharts,var,chart1=newFusionCharts(././FusionCharts/FCF_Column3D.swf,chart1Id,400,300);,chart1.setDataXML();,chart1.render(chart1div);,当我们单击”改变数据“按钮后，会调用,updateChart,(),方法，它会使用新的数据来重新构建图形。,这种方案看起来，好像是比较好。然而，在前面我们说了，使用,dataXML,方法加载数据时，不能含有中文字符，同理，使用,updateChartXML,方法，也不能有中文字符。如果你要使用中文，还是用第一种方法吧。你可能会想，既然有,updateChartXML,方法，那是不是有,updateChartURL,方法呢？我们用它不就可以了吗？是的，是有这个方法，不过，,FusionCharts,Free,版本里没有，只有,FusionCharts,版本里有。,FCF,中的下钻,在我们开发图形报表时，你可能会遇到这样的需求：用户要求点击柱状图的某根柱子，可查看它的详细数据。其他的一些基于,java,的图形报表组件，如,jfreechart,，也可以实现加连接的功能，但是使用起来还是有点麻烦的。其实它不光是加连接麻烦，正个使用起来都很麻烦，需要你在后台编写大量的代码。通过前面的章节，你应该知道，,FCF,的使用非常简单，你只需要关注你的数据如何产生就可以了。至于如何产生图形，并不需要你编一行代码。加连接也是如此。,FCF,支持三种类型的连接：,1,、普通的超链接，在同一个窗口打开新的页面。,2,、普通的超链接，在新窗口打开新的页面。,3,、,JavaScript,连接。,普通的超链接,我们先来看看第一种情况。想要在,FCF,图形里加连接，你只需要在数据集里加上一个,link,属性即可。如下：,我们发现,URL,是经过了编码的。是的，因为你的连接里可能会含有“,?”,，“,&”,等字符，所以需要编码。,FCF,在载入这个连接时，会对它进行解码，解码后上例中的连接就是“,ShowDetails.asp?Month,=Jan”,。,我们看一个完整的例子。,新窗口超链接,如果你想在一个新的窗口打开页面，只需要在连接的前面加上“,n-”,，就像下面的代码一样：,graphcaption=MonthlySalesSummary,subcaption,=Fortheyear2