预览加载中，请您耐心等待几秒...

FusionCharts图表插件开发教程ppt课件.ppt

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共74页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

FusionCharts图表插件开发教程目录FusionChartsFree安装目录结构 现在我们就来看看这个下载包里面都有些什么东西。SWF文件（创建图形主要靠它们了）所有的SWF文件（共22个）都在FusionChartsFree>Charts文件夹。如果你需要在你的web应用里创建图形，那么就把这些SWF文件都拷到你的应用下面。FusionChartsJavaScript文件FusionChartsJavaScript文件放在FusionChartsFree>JSClass文件夹。这些文件能够帮你用一种友好的方式把图形嵌入到html页面。示例代码所有的代码都放在FusionChartsFree>Code文件夹。图形例子我们创建了一些图形例子，放在FusionChartsFree>Gallery文件夹。你也可以通过文档左边的菜单SampleCharts来访问它。文档文档就放在FusionChartsFree>Contents文件夹，你可以直接点击FusionChartsFree下面的index.html来访问。安装 了解了下载包的目录结构以后，我们再来看看如何安装FCF到web应用里。 只需要两个步骤即可完成安装。 1、在你的web应用根目录下新建一个叫FusionCharts的文件夹。当然，并不是说它一定要叫这个名字，也不是一定要在根目录下。2、把所有的SWF文件都拷贝到这个FusionCharts里。 这就完成安装了，不再需要其他多余的步骤。 当然，有些情况下，并不需要与服务器的交互（比如，你直接使用JavaScript来嵌入，而不用jsp或php。数据也是直接写死在你的JavaScript代码里或xml文件里。），为了学习方便，你也可以把它安装在你的电脑上随便一个地方，比如d:\test下。安装步骤和上面的安装一样。FusionChartsFree我的第一个图形 创建XML数据文档 要做报表，当然要有数据了。在这个例子里，我们准备展示一年里每个月的销售情况。所有数据看起来就像下面的表格中的一样。 我们知道，FCF只接受XML格式的数据，其他如Excel，CSV，text等都不行。 现在我们按照上表中的数据，做成一个叫Data.xml的XML文件，保存在c:\FusionCharts\MyFirstChart文件夹下。这个文件的内容如下：<graphcaption='每月销售额柱形图'xAxisName='月份'yAxisName='Units'showNames='1'decimalPrecision='0'formatNumberScale='0'> <setname='一月'value='462'color='AFD8F8'/> <setname='二月'value='857'color='F6BD0F'/> <setname='三月'value='671'color='8BBA00'/> <setname='四月'value='494'color='FF8E46'/> ……. </graph> 上面的代码里，有一个叫<graph>的root元素，它还有一些属性，用来定义标题，坐标轴，数值格式。我们还看到有很多<set>元素，它用来描述数据。name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。创建包含图形的HTML文件 每个图形都要被放到HTML文件里才能显示，现在，我们把下面的代码保存c:\FusionCharts\MyFirstChart\Chart.html文件里。 <html> <head> <title>MyFirstFusionCharts</title> </head> <bodybgcolor="#ffffff"> <OBJECTclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase==6,0,0,0"width="600"height="500"id="Column3D"> <paramname="movie"value="../FusionCharts/FCF_Column3D.swf"/> <paramname="FlashVars"value="&dataURL=Data.xml&chartWidth=600&chartHeight=500"> <paramname="quality"value="high"/> <embedsrc="../FusionCharts/FCF_Column3D.swf"flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500"quality="high"width="600"height="500"