《FusionCharts图表插件开发教程.ppt》由会员分享，可在线阅读，更多相关《FusionCharts图表插件开发教程.ppt（74页珍藏版）》请在金锄头文库上搜索。
1、FusionCharts图表插件开发教程 目录 FusionChartsFree介绍FusionChartsFree安装FusionChartsFree我的第一个图形FusionChartsFree使用JavaScript加载图形FusionChartsFree使用dataXML加载数据FusionChartsFree图形的基本元素FusionChartsFree和XMLFusionChartsFree和组合图XML动态改变图形的类型和数据FCF中的下钻FCF中的基本数字格式FCF中的特殊字符间断数据的处理在JSP里使用FCF FusionChartsFree介绍 FusionCharts是I
2、nfoSoftGlobal公司的一个产品 InfoSoftGlobal公司是专业的Flash图形方案提供商 他们还有几款其他的 基于Flash技术的产品 都非常的漂亮 FusionChartsFree则是FusionCharts提供的一个免费版本 虽然免费 功能依然强大 图形类型依然丰富 不得不感叹技术发展的真快 99年的时候 flash刚刚在互联网上流行 那时还只是一个简单的动画软件 编程能力有限 但现在flash几乎无所不能了 图形报表则是它大展手脚的一个领域 FusionChartsfree是一个跨平台 跨浏览器的flash图表组件解决方案 能够被ASP NET ASP PHP JSP
3、ColdFusion RubyonRails 简单HTML页面甚至PPT调用 你不需要知道任何关于flash编程的知识 你只需要知道你所用的编程语言就可以了 FusionChartsFree安装 下载你可以在下面的地址下载它 将FusionChartsFree 以下简称FCF 解压到任意一个目录后 点击目录下的index html 就可以打开FCF的文档 这份文档我们的网站上也有 地址是http ajava org demo fusionchartsfree 目录结构现在我们就来看看这个下载包里面都有些什么东西 SWF文件 创建图形主要靠它们了 所有的SWF文件 共22个 都在FusionCh
4、artsFree Charts文件夹 如果你需要在你的web应用里创建图形 那么就把这些SWF文件都拷到你的应用下面 FusionChartsJavaScript文件FusionChartsJavaScript文件放在FusionChartsFree JSClass文件夹 这些文件能够帮你用一种友好的方式把图形嵌入到html页面 示例代码所有的代码都放在FusionChartsFree Code文件夹 图形例子我们创建了一些图形例子 放在FusionChartsFree Gallery文件夹 你也可以通过文档左边的菜单SampleCharts来访问它 文档文档就放在FusionChartsFr
5、ee Contents文件夹 你可以直接点击FusionChartsFree下面的index html来访问 安装了解了下载包的目录结构以后 我们再来看看如何安装FCF到web应用里 只需要两个步骤即可完成安装 1 在你的web应用根目录下新建一个叫FusionCharts的文件夹 当然 并不是说它一定要叫这个名字 也不是一定要在根目录下 2 把所有的SWF文件都拷贝到这个FusionCharts里 这就完成安装了 不再需要其他多余的步骤 当然 有些情况下 并不需要与服务器的交互 比如 你直接使用JavaScript来嵌入 而不用jsp或php 数据也是直接写死在你的JavaScript代码里
6、或xml文件里 为了学习方便 你也可以把它安装在你的电脑上随便一个地方 比如d test下 安装步骤和上面的安装一样 FusionChartsFree我的第一个图形 要使用FCF来创建图形 你需要做下面三件事情 1 选择好你要创建的图形类型对应的SWF文件 例如 我们现在要创建的是3D柱状图形 那么我们的SWF文件就是FCF Column3D swf 上篇文章已经介绍过了 所有的SWF文件都放在FusionChartsFree Charts文件夹里 2 XML数据文件 FCF只接受基于XML格式的数据 因此 你需要把你的数据转成XML格式 3 HTML文件 这个HTML文件将包含用来嵌入图形的
7、代码 在我们进行上面的工作之前 我们先要新建一个文件夹 例如 我们创建一个叫c FusionCharts的文件夹 以后我们的例子都放到这个里面 对于我们的第一个例子来说 我们将在c FusionCharts下再建一个叫MyFirstChart的文件夹 设置SWF文件我们还要在c FusionCharts下建一个叫FusionCharts的文件夹 现在 我们把所有的SWF文件都拷贝到到这个文件下面 c FusionCharts FusionCharts 以后 我们所有例子的代码 都要引用这个文件夹下面的SWF文件 好了 SWF文件就设置好了 创建XML数据文档要做报表 当然要有数据了 在这个例子
8、里 我们准备展示一年里每个月的销售情况 所有数据看起来就像下面的表格中的一样 我们知道 FCF只接受XML格式的数据 其他如Excel CSV text等都不行 现在我们按照上表中的数据 做成一个叫Data xml的XML文件 保存在c FusionCharts MyFirstChart文件夹下 这个文件的内容如下 上面的代码里 有一个叫的root元素 它还有一些属性 用来定义标题 坐标轴 数值格式 我们还看到有很多元素 它用来描述数据 name属性用来表示月份名称 value属性表示销售额 color属性表示图形颜色 创建包含图形的HTML文件每个图形都要被放到HTML文件里才能显示 现在
9、我们把下面的代码保存c FusionCharts MyFirstChart Chart html文件里 MyFirstFusionCharts 上面的代码 其实就是一个显示flash的简单标记 movie参数值指定我们的SWF文件 即FCF Column3D swf FlashVars参数值用来指定XML文件的路径以及图形的宽和高 看到这里 如果不熟悉在网页里调用Flash的朋友 可能会有点迷惑 因为我们发现有一个embed参数 它的各个值都和param参数的值是一样的 为什么会这样呢 其实 这是为了在不同的浏览器里都能运行Flash的一个解决办法 IE浏览器是使用param参数来运行Flas
10、h的 而Netscape则是使用embed参数来运行Flash 因此 为了保证我们的应用能够在大多数浏览器上运行 我们就需要加上embed参数 并且值和param完全相同 好了 所有工作都做完了 现在 你可以用IE打开Chart html 就能看到你的第一个漂亮的Flash图形了 问题如果你很不幸 没有在页面上看到图形 那么可能是下面的原因之一 1 SWF没有放到正确的文件夹 2 在Chart html里 SWF的路径设置不正确 3 没有安装FlashPlayer 4 没有启用浏览器Flash播放选项 如果你得到了一个 ErrorinLoadingData 的消息 可能是 1 Data xml
11、文件没放到正确的文件夹 2 Data xml的文件名不正确 比如 你可能不小心把它命名为Data xml txt 如果你得到了一个 InvalidXMLData 的消息 可能是 1 Data xml里的内容有错误 到这里 第一个图表就做完了 感觉怎么样 你是觉得简单呢 容易呢 还是小Case呢 不过 这里我有个小问题 就是Data xml里 yAxisName属性如果是中文的话 显示不出来 希望随着教程的继续 我进一步了解FCF以后 可以解决这个小问题 也许它就是BUG 图形转换上面的图形是一个柱形图 如果我们想用同样的数据 以饼图来展示 我们只需要将Chart html代码中的 FCF Co
12、lumn3D swf 改成饼图的SWF文件就可以了 即 FCF Pie3D swf 现在我们再刷新浏览器 看看效果 FusionChartsFree使用JavaScript加载图形 在上篇文章里 我们做出了第一个图形报表 我们是直接在HTML里使用和标记来加载图形的 实际上 我们还可以使用FCF提供的一个JavaScript类来加载图形 使用JavaScript的方式有几个好处 一是代码量大大减少 特别是当一个页面上有几个图形时 二是代码更加直观 三是可以避免IE出现 单击以激活使用这个控件 的提示 使用JS加载这个JS类文件就在FusionChartsFree JSClass文件夹下 我们把
13、它拷贝到c FusionCharts FusionCharts下面 现在 我们把原来的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 我们对上面的代码
14、进行以下解释 首先 我们用下面的语句来加载FusionCharts js文件 然后 我们定义了一个DIV 它还有个id 图形将出现这个DIV里 到时这里的字将被图形替代 我们的图形就出现在这个DIV里 接着 我们用四个参数建立了一个FusionCharts对象 varmyChart newFusionCharts FusionCharts FCF Column3D swf myChartId 600 500 第一个参数是SWF文件的地址 第二个是图形的id 这个id你可以随便叫什么 但是要注意 在后面我们讲到一个页面里有多个图形的时候 这个id一定要是唯一的 第三个参数是图形的宽 第四个参数是
15、图形的高 我们还要设置数据文件的地址 myChart setDataURL Data xml 最后 我们把图形渲染在指定的地方 myChart render chartdiv chartdiv 就是前面的DIV的id 这就表示把图形render到 chartdiv 现在你运行JSChart html 你会看到同Chart html一样的效果 很显然使用JavaScript加载图形 更方便 更直观 多图形有时候我们需要在一个页面里显示多个图形 例如 我们同时以饼图 柱状图 曲线图 区域图四中形式来表现每个月的销售情况 让用户想看哪个就看哪个 多图形FirstChartContainerPie3D
16、varmyChart1 newFusionCharts FusionCharts FCF pie3D swf myChartId1 600 400 myChart1 setDataURL Data xml myChart1 render chartdiv1 SecondChartContainerColumn3DvarmyChart2 newFusionCharts FusionCharts FCF Column3D swf myChartId2 600 300 myChart2 setDataURL Data xml myChart2 render chartdiv2 ThirdChartContainerLine2DvarmyChart3 newFusionCharts FusionCharts FCF line swf myChartId3 600 300 myChart3 setDataURL Data xml myChart3 render chartdiv3 FourthChartContainerArea2DvarmyChart4 newFusionCharts Fusi
