关闭

关闭

关闭

封号提示

内容

首页 FusionCharts Free中文开发指南第二版.pdf

FusionCharts Free中文开发指南第二版.pdf

FusionCharts Free中文开发指南第二版.pdf

上传者: lhf811225 2011-09-19 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《FusionCharts Free中文开发指南第二版pdf》,可适用于IT/计算机领域,主题内容包含道长教你学编程系列Javaim免费Flash图形解决方案Fusionchartsfree中文开发指南作者道长A(javaim创始人)采用免费开源产品符等。

道长教你学编程系列Javaim免费Flash图形解决方案Fusionchartsfree中文开发指南作者道长A(javaim创始人)采用免费开源产品构建高质量图形报表JavaIM道长教你学编程系列FusionChartsFree中文开发指南目录前言作者简介FUSIONCHARTSFREE介绍DD柱形图曲线图DD饼图、环图区域图堆栈图联合图蜡烛图漏斗图甘特图FUSIONCHARTSFREE安装下载目录结构安装SWFFUSIONCHARTSFREE我的第一个图形设置SWF文件创建XML数据文档创建包含图形的HTML文件问题图形转换FUSIONCHARTSFREE使用JAVASCRIPT加载图形使用JS加载多图形JavaIM做最专业的Java社区JavaIM道长教你学编程系列FusionChartsFree中文开发指南FUSIONCHARTSFREE使用DATAXML加载数据使用DATAXML提供数据使用JAVASCRIPT和DATAXMLSETDATAXML()方法的问题最佳模式FUSIONCHARTSFREE图形的基本元素图形背景和画布CHARTLABELS(图形标签)DIVLINES(刻度线)ALTERNATING(间隔色)HOVERCAPTION(提示信息)ANCHORS(锚点)FUSIONCHARTSFREE和XML数据类型单系列图形多系列图形FUSIONCHARTSFREE和组合图XML什么是组合图形代码简单解释注意动态改变图形的类型和数据动态改变图形的类型动态改变图形的数据FCF中的下钻普通的超链接新窗口超链接JAVASCRIPT连接FCF中的基本数字格式JavaIM做最专业的Java社区JavaIM道长教你学编程系列FusionChartsFree中文开发指南控制小数位位数自动格式化数字自定义千分位和小数分隔符增加数字前缀和后缀FCF中的特殊字符欧元符号英镑符号人民币符号分符号百分号符号符号>符号单引号符号间断数据的处理在JSP里使用FCF结束语附录JavaIM做最专业的Java社区JavaIM道长教你学编程系列FusionChartsFree中文开发指南前言 最初写这份文档只是出于对FCF的兴趣也是为了给我的小站增加一点原创内容。后来发现越来越多的站转载这份教程问题也就出来了。因为他们转载时并没有完整的转载这样会给读者造成一些不便于是我就想把它整理成册方便大家下载传阅。既然都做成了电子书的模样当然就少不了一个漂亮的封面了。我很喜欢看O'Reilly出版社的书他们出版的书封面都很有特色。我就照着葫芦画了个瓢。为什么选只鹦鹉呢?FCF可以做出五彩斑斓的报表而鹦鹉的颜色大概是动物里最鲜艳最多彩的。仅此而已。老外出书都会有一大堆要感谢的人。咱也来追逐一回吧。我要感谢mark他是ajavaorg的另一位创始人是他维护管理着ajavaorg的大部分工作才使得我有时间来写此书。另外他也是此书的电子版制作者。我还要感谢每天晚上陪伴着我的一只蚊子是的它每天都陪着我无论刮风下雨无论心情好坏无论凌晨点半。没有它我可能就写不出本书了。虽然我多少次企图结束它但最终没下得了手。中国人出书一般都会说由于水平有限和时间有限所以错误难免。很假。我就直说了吧我时间很多但是水平有限所以错误在所难免欢迎大家指正。道长AJavaIM做最专业的Java社区Java道长教你学编程系列FusionChartsFree中文开发指南IMJava做最专业的Java社区IM作者简介 道长AAJavaorg和JavaIM站长一个和你们一样默默无闻的程序员每天为了生活忙碌着手中的银子却始终不够用。喜欢上网易看新闻更喜欢看网易的新闻评论热衷于在网易盖楼。他是一个多愁善感的人也是一个爱憎分明的人看到丑恶的现象他会愤怒看到美女他会高兴。他非常认同“马赛克是阻挡人类进步的绊脚石”这句名言并且在此庄严地向全世界宣布AJavaorg绝不首先使用马赛克。他喜欢王菲、梁静茹喜欢张学友、任贤齐喜欢周华健、刘德华他喜欢篮球、羽毛球、健身喜欢CS、帝国、星际他喜欢尼古拉斯凯奇、詹森斯坦森、阿诺德施瓦辛格、西尔维斯特史泰龙他目前在某城市的某公司任某职正开发着某项目。Java道长教你学编程系列FusionChartsFree中文开发指南IMJava做最专业的Java社区IMFusionChartsFree介绍FusionCharts是InfoSoftGlobal公司的一个产品InfoSoftGlobal公司是专业的Flash图形方案提供商他们还有几款其他的基于Flash技术的产品都非常的漂亮。FusionChartsFree则是FusionCharts提供的一个免费版本虽然免费功能依然强大图形类型依然丰富。不得不感叹技术发展的真快年的时候flash刚刚在互联网上流行那时还只是一个简单的动画软件编程能力有限。但现在flash几乎无所不能了图形报表则是它大展手脚的一个领域。FusionChartsfree是一个跨平台跨浏览器的flash图表组件解决方案能够被ASPNET,ASP,PHP,JSP,ColdFusion,RubyonRails,简单HTML页面甚至PPT调用。你不需要知道任何关于flash编程的知识你只需要知道你所用的编程语言就可以了。FusionChartsfree目前最新版本是v主要做了以下改动:增加了使用jsp和RubyonRails来集成FusionCharts的代码和文档。FusionChartsDOM更加容易地把图表加载到你的页面上。修改了Net的使用代码和文档。增加了新的PHPAPI,并修复了一些BUG。修改了FusionChartsjs以便可以支持双引号。(那就是说以前不支持?)增加了在FusionCharts使用编码的示例。FusionCharts到底能做什么呢?下面就给大家展示一下。Java道长教你学编程系列FusionChartsFree中文开发指南IMDD柱形图图表DD柱形图Java做最专业的Java社区IMJava道长教你学编程系列FusionChartsFree中文开发指南IM图表DD柱形图曲线图Java做最专业的Java社区IMJava道长教你学编程系列FusionChartsFree中文开发指南IM图表曲线图图表曲线图DD饼图、环图图表DD饼图、环图Java做最专业的Java社区IMJava道长教你学编程系列FusionChartsFree中文开发指南IM图表DD饼图、环图区域图图表区域图图表区域图Java做最专业的Java社区IMJava道长教你学编程系列FusionChartsFree中文开发指南IM堆栈图图表堆栈图图表堆栈图Java做最专业的Java社区IMJava道长教你学编程系列FusionChartsFree中文开发指南IM联合图图表联合图图表联合图Java做最专业的Java社区IMJava道长教你学编程系列FusionChartsFree中文开发指南IM蜡烛图图表蜡烛图图表蜡烛图漏斗图Java做最专业的Java社区IMJava道长教你学编程系列FusionChartsFree中文开发指南IM图表漏斗图图表漏斗图甘特图图表甘特图图表甘特图Java做最专业的Java社区IMJava道长教你学编程系列FusionChartsFree中文开发指南IMJava做最专业的Java社区IM看了这么多漂亮的图形以后是不是有点感到兴奋呢?如果把这么漂亮专业的图形放到用户面前相信他们也会满意的。事实上上面的图形只是本道的截图真正的flash图表在显示时还有优美的动画。好了就不在多说了下篇文章本道将介绍如何安装使用FusionCharts。FusionChartsFree安装本文将介绍FusionChartsFreeV的下载及安装。下载你可以在下面的地址下载它。http:ajavaorgtoolotherhtml文件不大共M。将FusionChartsFree(以下简称FCF)解压到任意一个目录后点击目录下的indexhtml就可以打开FCF的文档。这份文档我们的网站上也有地址是http:ajavaorgdemofusionchartsfree目录结构现在我们就来看看这个下载包里面都有些什么东西。SWF文件(创建图形主要靠它们了)所有的SWF文件(共个)都在FusionChartsFree>Charts文件夹。如果你需要在你的web应用里创建图形那么就把这些SWF文件都拷到你的应用下面。FusionChartsJavaScript文件FusionChartsJavaScript文件放在FusionChartsFree>JSClass文件夹。这些文件能够帮你用一种友好的方式把图形嵌入到html页面。示例代码所有的代码都放在FusionChartsFree>Code文件夹。图形例子我们创建了一些图形例子放在FusionChartsFree>Gallery文件夹。你也可以通过文档左边的菜单SampleCharts来访问它。文档文档就放在FusionChartsFree>Contents文件夹你可以直接点击FusionChartsFree下面的indexhtml来访问。安装了解了下载包的目录结构以后我们再来看看如何安装FCF到web应用里。Java道长教你学编程系列FusionChartsFree中文开发指南IMJava做最专业的Java社区IM只需要两个步骤即可完成安装:在你的web应用根目录下新建一个叫FusionCharts的文件夹。当然并不是说它一定要叫这个名字也不是一定要在根目录下。把所有的SWF文件都拷贝到这个FusionCharts里。这就完成安装了不再需要其他多余的步骤。当然有些情况下并不需要与服务器的交互(比如你直接使用JavaScript来嵌入而不用jsp或php。数据也是直接写死在你的JavaScript代码里或xml文件里。)为了学习方便你也可以把它安装在你的电脑上随便一个地方比如d:test下。安装步骤和上面的安装一样。SWF接下来介绍SWF文件都分别对应哪种图形。图形类型文件名单系列图形ColumnDFCFColumnDswfColumnDFCFColumnDswfLineDFCFLineswfAreaDFCFAreaDswfBarDFCFBarDswfPieDFCFPieDswfPieDFCFPieDswfDoughnutDFCFDoughnutDswf多系列图形MultiseriesColumnDFCFMSColumnDswfMultiseriesColumnDFCFMSColumnDswfMultiseriesLineDFCFMSLineswfMultiseriesBarDFCFMSBarDswfMultiseriesAreaDFCFMSAreaDswf堆栈图StackedColumnDFCFStackedColumnDswfJava道长教你学编程系列FusionChartsFree中文开发指南IMJava做最专业的Java社区IMStackedColumnDFCFStackedColumnDswfStackedBarDFCFStackedBarDswfStackedAreaDFCFStackedAreaDswf组合图MultiseriesColumnDLineDualYAxisFCFMSColumnDLineDYswfMultiseriesColumnDLineDualYAxisFCFMSColumnDLineDYswf财经图CandlestickChartFCFCandlestickswf漏斗图FunnelChartFCFFunnelswf甘特图GanttChartFCFGanttswfFCF支持上面的种图形对于大部分人来说都足够了。好了到现在为止还没有开始真正的编程大家可能有点急了吧下篇文章我们就来创建我们的第一个Flash图形报表。FusionChartsFree我的第一个图形在介绍完了FCF的下载安装以后现在我们终于要开始创建我们的第一个图表了。我们将要创建一个简单的D柱状图形用它来展示每月销售情况摘要。要使用FCF来创建图形你需要做下面三件事情:)选择好你要创建的图形类型对应的SWF文件。例如我们现在要创建的是D柱状图形那么我们的SWF文件就是FCFColumnDswf。上篇文章已经介绍过了所有的SWF文件都放在FusionChartsFree>Charts文件夹里。)XML数据文件。FCF只接受基于XML格式的数据。因此你需要把你的数据转成XML格式。)HTML文件。这个HTML文件将包含用来嵌入图形的代码。Java道长教你学编程系列FusionChartsFree中文开发指南IMJava做最专业的Java社区IM在我们进行上面的工作之前我们先要新建一个文件夹。例如我们创建一个叫c:FusionCharts的文件夹。以后我们的例子都放到这个里面。对于我们的第一个例子来说我们将在c:FusionCharts下再建一个叫MyFirstChart的文件夹。设置SWF文件我们还要在c:FusionCharts下建一个叫FusionCharts的文件夹。现在我们把所有的SWF文件都拷贝到到这个文件下面(c:FusionChartsFusionCharts)。以后我们所有例子的代码都要引用这个文件夹下面的SWF文件。好了SWF文件就设置好了。创建XML数据文档要做报表当然要有数据了。在这个例子里我们准备展示一年里每个月的销售情况。所有数据看起来就像下面的表格中的一样。我们知道FCF只接受XML格式的数据其他如ExcelCSVtext等都不行。现在我们按照上表中的数据做成一个叫Dataxml的XML文件保存在c:FusionChartsMyFirstChart文件夹下。这个文件的容如下:<graphcaption='每月销售额柱形图'xAxisName='月份'yAxisName='Units'showNames=''decimalPrecision=''formatNumberScale=''><setname='一月'value=''color='AFDF'><setname='二月'value=''color='FBDF'><setname='三月'value=''color='BBA'><setname='四月'value=''color='FFE'><setname='五月'value=''color='EE'><setname='六月'value=''color='D'><setname='七月'value=''color='EE'><setname='八月'value=''color=''><setname='九月'value=''color='BAA'><setname='十月'value=''color='ED'><setname='十一月'value=''color='DD'><setname='十二月'value=''color='ABE'><graph>上面的代码里有一个叫<graph>的root元素它还有一些属性用来定义标题坐标轴数值格式。我们还看到有很多<set>元素它用来描述数据。name属性用来表示月Java道长教你学编程系列FusionChartsFree中文开发指南IMJava做最专业的Java社区IM份名称value属性表示销售额color属性表示图形颜色。创建包含图形的HTML文件每个图形都要被放到HTML文件里才能显示现在我们把下面的代码保存c:FusionChartsMyFirstChartCharthtml文件里。<html><head><title>MyFirstFusionCharts<title><head><bodybgcolor="#ffffff"><OBJECTclassid="clsid:DCDBEAEDcfB"codebase=http:downloadmacromediacompubshockwavecabsflashswflashcab#version=,,,"width=""height=""id="ColumnD"><paramname="movie"value="FusionChartsFCFColumnDswf"><paramname="FlashVars"value="dataURL=DataxmlchartWidth=chartHeight="><paramname="quality"value="high"><embedsrc="FusionChartsFCFColumnDswf"flashVars="dataURL=DataxmlchartWidth=chartHeight="quality="high"width=""height=""name="ColumnD"type="applicationxshockwaveflash"pluginspage="http:wwwmacromediacomgogetflashplayer"><object><body><html>上面的代码其实就是一个显示flash的简单标记。movie参数值指定我们的SWF文件即FCFColumnDswf。FlashVars参数值用来指定XML文件的路径以及图形的宽和高。看到这里如果不熟悉在网页里调用Flash的朋友可能会有点迷惑因为我们发现有一个embed参数它的各个值都和param参数的值是一样的为什么会这样呢?其实这是为了在不同的浏览器里都能运行Flash的一个解决办法。IE浏览器是使用param参数来运行Flash的而Netscape则是使用embed参数来运行Flash。因此为了保证我们的应用能够在大多数浏览器上运行我们就需要加上embed参数并且值和param完全相同。好了所有工作都做完了现在你可以用IE打开Charthtml就能看到你的第一个漂亮的Flash图形了。Java道长教你学编程系列FusionChartsFree中文开发指南IM图表第一个Flash图形问题如果你很不幸没有在页面上看到图形那么可能是下面的原因之一:SWF没有放到正确的文件夹。在Charthtml里SWF的路径设置不

用户评论(0)

0/200

精彩专题

上传我的资料

每篇奖励 +2积分

资料评价:

/11
仅支持在线阅读

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部