FusionChart初学指南.docxVIP

注：本教程为java版面向FusionChart初学者，高手绕道。 首先介绍一下Fusionchart最近比较流行的页面图表展示工具，其他信息请百度。 好了要想用Fusionchart必须要有它的工具包本人搞到的是 打开以后可以看到 这里面是一些图标的SWF文件和js文件 把这些东西都放到工程里面如下图： 自己去建立工程这个我不用说了吧，我用的是myeclipse6.0 导入之后firebug-lite.Js在我这会报错可以忽略，实在受不了也可以把这个文件删除，它并不是必须的。除了这些要想显示一个fusionchart图标还需要以下三个条件： XML数据源 Javascript或是html的调用代码（本教程只讲javascript调用） 图表展示的载体通常它是一个DIV 好了下面是重头戏如何获得数据源格式，和数据加载方式，要想获得这些东西我们需要访问fusionchart的官网下载相关文件fusionchart官网网址是： HYPERLINK / 打开之后直接点击download如下图： 也许你还要填写一些个人信息，不过没关系，这很简单。 填完点击download，选择第一个选项 把这个zip文件下载下来看一下里面的目录结构 Version.Txtl里面是各个版本的改动有兴趣的朋友可以看一下 Index.html 在这里面你能找到大部分你所需要的信息不过这些我们先不管 我们现在需要的时数据源格式和加载方法在Tools包中给我们提供了两个非常实用的工具打开它 FCDataConverter是一个xml和json互相转换的工具 XMLGenerator是一个XML生成器，不只是XML还有html也同样可以生成打开它 打开XMLGenerator.html可以看到 点击Launch XML Generator 打开生成器页面 我只讲第一个i want to manually enter data即我想要手动输入数据 我们输入几条数据比如一个dota游戏数据 点击Convert to XML 转换为XML既可以得到我们需要的XML数据源 点击GenerateHTML即可以生成HTML文件 在这里可以选择图标类型 我们选择比较绚的Column 3D类型，图标的宽高选择默认 将XML代码拷到工程中Data.xml中 将html代码拷到index.html中,修改文件引用路径为自己项目的路径 也可以使用myChart.setXMLData(String)方法加载拼成的字符串形式的XML文件 启动项目输入地址 HYPERLINK 00:8099/chart/pages/index.html 00:8099/chart/pages/index.html可以看到生成的图标了 我们的图标小了点好调整一下宽度 将宽度改为800在修改一下Data.xml数据 保存刷新页面 可以正常显示五个dota游戏玩家的比赛结果柱状图了 然后再介绍一下Gallery包，查了一下Gallery是画廊的意思，顾名思义里是所有图标的图例 开打他 左边是图表分类 点击其中一个选项，示例图标会在右边展示下面有三个按钮，第一个是查看图标，第二个是查看XML格式数据源代码，第三个是Json格式代码 Fusionchart还提供了图标导出功能在ExportHandlers包中提供了示例打开这个包，由于本人现在只会java所以打开J2EE包可以看到 打开Readme.txt，简单翻译一下里面的内容大概是这个意思： 为了将图标导出为image或pdf文件工程中需要以下三个文件 1. fcexporter.jar (contains all the dependency classes) 2. fcexporthandler.jar (contains the export handler servlet and resources) 3. /classes/fusioncharts_perties (configuration file) 安装 第一步 复制必要的文件 将fcexporter.jar和fcexporthandler.jar复制到 WEB-INF/lib 中 将fusioncharts_perties 复制到WEB-INF/classes下（即src里面） 第二步 配置web.xml,添加如下配置 servlet display-nameFCExporter/display-name servlet-nameFCExporter/servlet-name servlet-classcom.fusioncharts.exporter.servlet.FCExporter/servlet-class load-on-startup1/lo