FusionCharts图表插件开发教程.ppt

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安装,下载你可以在下面的地址下载它。http:/Free（以下简称FCF）解压到任意一个目录后，点击目录下的index.html，就可以打开FCF的文档。这份文档我们的网站上也有，地址是http:/ajava.org/demo/fusionchartsfree/。,目录结构现在我们就来看看这个下载包里面都有些什么东西。SWF文件（创建图形主要靠它们了）所有的SWF文件（共22个）都在FusionChartsFreeCharts文件夹。如果你需要在你的web应用里创建图形，那么就把这些SWF文件都拷到你的应用下面。FusionCharts JavaScript文件FusionCharts JavaScript文件放在FusionChartsFreeJSClass文件夹。这些文件能够帮你用一种友好的方式把图形嵌入到html页面。示例代码所有的代码都放在FusionChartsFreeCode文件夹。图形例子我们创建了一些图形例子，放在FusionChartsFreeGallery文件夹。你也可以通过文档左边的菜单Sample Charts来访问它。文档文档就放在FusionChartsFreeContents文件夹，你可以直接点击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文件都放在FusionChartsFreeCharts文件夹里。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文件里。MyFirstFusionCharts,上面的代码，其实就是一个显示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”的消息，可能是：文件没放到正确的文件夹。的文件名不正确。比如，你可能不小心把它命名为。如果你得到了一个“Invalid XML Data”的消息，可能是里的内容有错误。到这里，第一个图表就做完了，感觉怎么样？你是觉得简单呢，容易呢，还是小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类文件就在FusionChartsFreeJSClass文件夹下，我们把它拷贝到c:FusionChartsFusionCharts下面。现在，我们把原来的Chart.html复制一份，命名为JSChart.html。这样做是为了避免直接在Chart.html上进行修改，因为以后还要用到Chart.html，下面就是JSChart.html的代码。图形将出现这个DIV里，到时这里的字将被图形替代。varmyChart=newFusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId,600,500);myChart.setDataURL(Data.xml);myChart.render(chartdiv);,我们对上面的代码进行以下解释。首先，我们用下面的语句来加载FusionCharts.js文件。然后，我们定义了一个DIV，它还有个id。图形将出现这个DIV里，到时这里的字将被图形替代。我们的图形就出现在这个DIV里。接着，我们用四个参数建立了一个FusionCharts对象，varmyChart=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 varmyChart1=newFusionCharts(./FusionCharts/FCF_pie3D.swf,myChartId1,600,400);myChart1.setDataURL(Data.xml);myChart1.render(chartdiv1);SecondChartContainerColumn3D varmyChart2=newFusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId2,600,300);myChart2.setDataURL(Data.xml);myChart2.render(chartdiv2);ThirdChartContainerLine2D varmyChart3=newFusionCharts(./FusionCharts/FCF_line.swf,myChartId3,600,300);myChart3.setDataURL(Data.xml);myChart3.render(chartdiv3);FourthChartContainerArea2D varmyChart4=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。可能有点不好理解，看看下面的代码就知道了。quality=highwidth=600height=500name=Column3Dtype=application/x-shockwave-flashpluginspage=http:/,我们把上面的代码保存到一个叫ChartDataXML.html的文件里。可以看到，FlashVars 的值是这样的一种形式：在EMBED 标记里，是这样的：而原来我们放到FlashVars的两个参数-chartWidth，chartHeight，则被放到了SWF文件地址的后面。,使用JavaScript和dataXML ThechartwillappearwithinthisDIV.Thistextwillbereplacedbythechart.varmyChart=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里进行编码的函数是()。,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。就是这么简单。我们来看看代码吧。,/数据 varstrXML=;/*当用户单击按钮时调用这个方法。*这个方法用来使用新的SWF文件创建一个新的FusionCharts实例。*/functionupdateChart(chartSWF)/Createanotherinstanceofthechart.varchart1=newFusionCharts(chartSWF,chart1Id,400,300,0,0);chart1.setDataXML(strXML);chart1.render(chart1div);FusionCharts varchart1=newFusionCharts(././FusionCharts/FCF_Column3D.swf,chart1Id,400,300,0,0);chart1.setDataXML(strXML);chart1.render(chart1div);Showas:,动态改变图形的数据我们已经会动态改变图形的类型了，动态改变数据和上面的原来一样，我们只需要在新建实例的时候，传入新的数据就可以了。那么为什么还要单独来讲解这个呢？因为FCF给我们提供了一个更简单的方法，那就是updateChartXML(domid,data)。它的第一个参数就是我们在创建FusionCharts实例时设置的图形domid，第二个参数是XML数据字符。来看看下面的代码。,FusionChartsFreename=btnUpdate,当我们单击”改变数据“按钮后，会调用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-”，就像下面的代码一样：,JavaScript连接 我们还可以加上JavaScript连接，在连接里，你可以调用任何在本页可以调用到的JavaScript函数。如下：下图是一个点击连接后弹出提示框的例子。,FCF中的基本数字格式,控制小数位位数所有的FCF图形都支持decimalPrecision属性，这个属性是用来指定小数位的位数的。如果你没有指定这个属性的值，那么FCF默认会显示小数位后面2位小数。这个属性是全局的，也就是说，它对这个图形上的所有数字都起作用。例如，如果你设置decimalPrecision=0，那么像这些12.432，13.4，13，就会显示成12，13，13。,同样的，如果你有0.12432，0.134，0.13等数据，并且没有指定decimalPrecision的值，那么FCF就会显示成0.12，0.13，0.13。如果你把decimalPrecision设置成4，那么就会显示成0.1243，0.1340，0.1300。,自动格式化数字FCF会自动的给你的数字加上K（千）或M（百万），如下图。,上图中，三个数字分别代表12500，13400，13300。FCF会自动地把这些数字转化为以千为单位，或是以百万为单位。如果你不想这样，你就加上如下的代码：效果如下：,现在显示的是全部的数字了。不过，它还加了一些逗号来分隔这些数字。如果你不喜欢这样，你就加上formatNumber=0。但是，如果设置了formatNumber=0，那么就不能格式化小数位了。看起来代码就像这样：效果是这样：,自定义千分位和小数分隔符FCF默认使用“.”作为小数分隔符，使用“,”作为千分位分隔符。这也是我们的使用习惯。如果你想改成其他的，也可以。我们使用decimalSeparator 指定小数分隔符，使用thousandSeparator 指定千分位分隔符。例如，我们想把小数分隔符和千分位分隔符调换一下：效果如下：,增加数字前缀和后缀FCF允许我们给所有的数字都加上前缀和后缀。如果我们设置numberPrefix=$，那么会在所有的数字前面就会加上“$”，就像这样：$40000,$50000。如果我们设置numberSuffix=%25，那么会在所以的数字后面加上“%”，就像这样：43%，39%。我们注意到，“%”是经过了编码的。在FCF里，一些特殊的编码都需要经过编码。下一章我们会详细介绍特殊字符。,FCF中的特殊字符,欧元符号在FCF里显示“”，你需要用“%80”来替换它。如下：上面的代码会在数字前面都加上“”。英镑符号在FCF里显示“”，你需要用“%A3”来替换它。如下：上面的代码会在数字前面都加上“”。,人民币符号在FCF里显示“￥”，你需要用“%A5”来替换它。如下：上面的代码会在数字前面都加上“￥”。分符号在FCF里显示“”，你需要用“%A2”来替换它。如下：上面的代码会在数字后面都加上“”。,百分号符号在FCF里显示“%”，你需要用“%25”来替换它。如下：上面的代码会在数字后面都加上“%”。”来替换它。如下：上面的代码标题显示为“Total of 2003&2004”。,符号在FCF里显示“”，你需要用“”来替换它。,间断数据的处理,有时候我们的数据并不是连续的，例如我们有一个反映每个月销售额的图形，然而，五月和六月的数据我们缺失了，像这种情况我们该如何处理呢？FCF早就想到这个问题了，我们看看下面的代码：我们看到，上面五月和六月的数据里，并没有value这个属性。,如果把这样的数据放到一个柱状图里，效果如下：ajava.org/uploads/090117/1_202012_1.jpg1在五月和六月那里没有柱子。这就是我们想要的效果。,如果把这样的数据放到一个曲线图里，效果如下：ajava.org/uploads/090117/1_202027_1.jpg1同样的，五月和六月那里没有线段，它是缺失的。如果你想连五月和六月的标签都不显示，你可以这样：当然，你还可以干脆连都不要。不过那样会让看图的人容易误解，因为人们一般都会以为是按顺序来排列月份的。,多系列的图形也可以放置这样的断点数据。看下面的图：,上图的XML数据如下：,在JSP里使用FCF,前面我们讲的例子里，都是采用HTML或JavaScript来显示图形，这是一种最基本的使用方法。FCF还提供了一些其他的方法来显示图形，有PHP、ASP、JSP等等。不过，有点要说明的是，这些方法其实都是基本使用方法的一种变形，它们最终其实都是在页面上输出HTML或JavaScript。因此，如果你觉得采用HTML或JavaScript就足够了，那就不需要阅读本章了。我们来看个例子吧。这是XML数据代码：,这个是JSP代码：FusionChartsFree-SimpleColumn3DChart FusionChartsFreeExamples Basicexampleusingpre-builtData.xml Unabletoseethechart above?Backtolistofexamples,我们可以看到，上例中采用了jsp的include标签，包含了一个叫FusionChartsHTMLRenderer.jsp的JSP页面，它接受一些参数，用来加载数据或控制图形，debugMode必须是flase，因为在FCF里是没有调试功能的。这个JSP页面最终输出的是一段采用HTML来加载图形的代码。它就在下载包 Code JSP Includes文件夹里。还有另外一个JSP-FusionChartsRenderer.jsp，它输出的是一段采用JavaScript来加载图形的代码。下面是它的使用代码：,FusionChartsFree-SimpleColumn3DChart FusionChartsFreeExamples EmbeddingchartusingFusionChartsJavaScriptclassandusingdataURLmethod.Unabletoseethechartabove?Backtolistofexamples,debugMode和registerWithJS必须是flase，因为在FCF里是没有这两个功能的。上面两个页面，显示的图形是一样的：ajava.org/uploads/090117/1_205813_1.jpg1,3Q！先生，女士们，大爷们，奶奶们！,