1、Using with J2EE:首先要配置 Myeclipse+Tomcat+JDK+Mysql 环境。当运行 tomcat 服务器时复制可部署得文件夹中的 FusionCharts_J2EE.war到“CATALINA_HOME/ webapps 文件夹。为了配置 MySQL 数据库：打开文件“CATALINA_HOME/ webapps/FusionCharts_J2EE/META-INF/context.xml，。在此 XML，请改变用户名，密码，URL 根据你的数据库。context.xml 中也包含了 Web 应用程序上下文，如果你已经改变的情况下，请修改它。运行的 FactoryD
2、BCreation.sql 和 UTFExampleTablesCreation.sql 脚本来创建所需的表和样本数据。启动 Mysql 和 Tomcat。请注意从下面网址进入 如果你不想使用 war 文件（如上所述），您可以在 Tomcat 的部署所有文件夹和文件。对于这一点，1。 CATALINA_HOME/ webapps 中创建一个文件夹 FusionCharts_J2EE 和子文件夹 JSP。2。复制 Download Package Code J2EE 文件夹到 “CATALINA_HOME”/ webapps/FusionCharts_J2EE/JSP 文件夹的。3。将 Code
3、/J2EE 文件夹的 WEB-INF 文件夹移动到“CATALINA_HOME”/ webapps/FusionCharts_J2EE 文件夹下。4。将 META-INF 文件夹中存在的 Code/J2EE 文件夹移动“CATALINA_HOME”/ webapps/FusionCharts_J2EE 文件夹下。5。最后，将 Download Package Code 下的 FusionCharts 的文件夹复制到“CATALINA_HOME”/ webapps/FusionCharts_J2EE 文件夹下。6。启动 Tomcat 服务器，并访问应用程序打开的浏览器窗口通过以下地址：http:
4、/localhost:8080/FusionCharts_J2EE/JSP/index.html注：“CATALINA_HOME” 指的是 Tomcat 的安装目录一、Getting Started with JSPFusionCharts XT 的，可以有效地使用 JSP 绘制动态数据驱动的图表。在这个页面中，我们将讨论，1、如何设置 FusionCharts XT 的 J2EE 环境。2、如何嵌入 FusionCharts XT 到现有 Web 应用程序。1、如何设置 FusionCharts XT 的 J2EE 环境中。步骤：将 FusionCharts 的文件夹中包含了所有的 swf
5、和 js 文件放到 Web 应用程序中。复制的 fchelper.jar， fctl.jar，fcexporter.jar 和 fcexporthandler.jar 到您的Web 服务器的类路径（在 Tomcat 中，WebAppRoot/ WEB-INF/lib 中）复制 JSTL api.jar 和 JSTL impl.jar，以防你在 JSP 中使用 JSTL。此外，复制 fcsampleshelper.jar 示例应用程序试图提供下载。如果你正从下载的尝试示例应用程序，那么这一切已经为您准备好了。请按照 readme.txt 文件在下载包 代码 J2EE 文件夹存在。请注意：，Fus
6、ionCharts 的 JSP 标签库（fctl.jar）取决于 FusionCharts 的的Helper 类（fchelper.jar），（所以总是包括在 classpath 中 fchelper.jar）2、如何嵌入 FusionCharts XT 到现有 Web 应用程序。您完成初始设置后，你剩下要做的是 - 使用 FusionCharts 的 JSP 标签嵌入到你的 JSP 中的图表，通过提供必要的属性。步骤：1、jsp 中三段代码来（没有逻辑）嵌入图表。2、Bean 提供图表的渲染的数据和数据源。JSP 里的代码：Bean 里的代码：（c om.fusioncharts.sampl
7、edata.BasicRenderData）protected String xml; protected String chartId = “basicChart“; protected String URL = “Data/Data.xml“; protected String width = “600“; protected String height = “300“; protected String swfFilename = “Column3D.swf“;/ followed by getter and setter methods for the fields从上面的类，你可以使
8、用 XML 字段或 URL 字段提供你的 JSP 中的数据。如果您使用的是 XML 字段，然后将其值设置为一个有效的 FusionCharts 的 XML。如果您使用的 URL 字段中，然后将 data.xml 放在 Data 文件夹中。一个 XML示例如下图所示：用 JSP 使用 FusionCharts XT 的 - 基本例子FusionCharts XT 可以有效地同 JSP 结合，来绘制动态数据驱动的图表。在这个例子中，我们将展示一些基本的例子来帮助你开始。即使与 JSP 一起使用时，FusionCharts XT 在内用 JavaScript 和 XML/ JSON 渲染图表。JSP
9、 代码实际上可以帮助你的输出 JavaScript 和 XML/ JSON。为了帮助您理解本节中，我们会建议你去浏览下面的文档部分（如果你还没有看过他们）下面的章节：创建你的第一个图表Follow the steps below to get started:1. Create a folder LearningFusionCharts on your hard-drive. We will use this folder as the root folder for building all FusionCharts XT examples. 2. Create a folder named
10、 MyFirstChart inside the above folder. Inside the MyFirstChart folder, create a folder named FusionCharts. 3. Copy Column3D.swf from Download Pack Charts folder to the FusionCharts folder. This is the SWF file required to render this chart in Flash.4. Copy FusionCharts.js, FusionCharts.HC.js, Fusion
11、Charts.HC.Charts.js and jquery.min.js files from Download Pack Charts folder to FusionCharts folder. These JavaScript files help you easily embed FusionCharts XT in your page and also render the chart in JavaScript, when viewed on a machine or device that does not support Flash.5. Create an XML file
12、 in MyFirstChart folder with name Data.xml.6. Create the code given below (left), which is the XML-lized form of the sales data shown in the table (right). Copy the XML code to Data.xml file.更改图表类型和大小To change the chart type, all you have to do is to edit the previous code and change the name SWF fi
13、le to Pie3D.swf. Lets see how the change is incorporated in the HTML code (in your web page).Changing charts width and height is as easy as changing the chart type. You can set the dimensions of the chart either in terms of pixels or specify the percentage width and height of the chart relative to i
14、ts container (a DIV or any other HTML element). If the size is specified in pixels, then the charts dimensions remain constant irrespective of the size of the container. However, if the width and height of the chart is set as percentage of the container, then the chart automatically adapts itself to
15、 the change in size of the container.Setting width and height in pixel valuesSetting width and height in percent valuesDynamic resize feature of charts配置图表的背景，帆布，字体，标题，数据图，标签，值，轴，传说，填充和利润率，和数字格式Customizing Background colorsCustomizing Chart BorderYou can also have a border around the chart. By defau
16、lt, the border is displayed in 2D charts. In 3D charts by default the border is not displayed. To display the border you need to set the showBorder attribute to 1. showBorder borderColor borderThickness borderAlphaUsing gradient fill for background When using a gradient fill for the background, you
17、can set the alpha and ratio in which colors are to be distributed, and the angle at which you want the gradient to be. The following attributes help you do the same:External Image or SWF File as Backgroundall you need to do is set bgImage property of element. The code to embed the image is as shown
18、below:XML：.JSON：“chart“: “bgImage“:“pizza.jpg“,. Setting background as transparentApplying effects to backgroundXML/JSON Attributes for Chart Canvas（画布）XML/JSON Attributes for Legend（只在多系列和组合图标中）在多系列/组合图表中，每个数据集的系列名称显示在图表的图例。这有助于你有关数据图系列的名称，它的颜色。图例不会出现单系列的图表，因为图表中只有一个序列。从 FusionCharts XT，图例是互动的。也就是说
19、，当你点击每个图例图标，隐藏该项目对应的数据集。在下面的例子中，利润的图例图标被点击，导致下面的图表。注意如何盈利图标也被转换为灰度。显示区域回来，你再次点击这个图标。showLegend=“1“Number Formatting in FusionCharts XTFusionCharts 的 XT 提供了很多的选择在图表上的数字格式。您可以配置号码前缀和后缀，小数，根据预先定义的规模数字和缩放。在本节中，我们将看到的数字格式属性 FusionCharts XT 的支持，并期待在下一节成数字缩放。使用 XML 或 JSON 作为数据源FusionCharts XT and XMLFusion
20、Charts XT 使用 XML 或 JSON 数据来渲染图表。在这两种数据格式，数据文件（或字符串）包含要呈现的数据，图表设置和化妆品。XML 是一种简单和结构化的语言，这是很容易阅读和理解。下面给出的是XML 的基础知识：XML 文档是一个简单的文本文件，由标签和与他们相关的数据组成。您可以用自己的标签，如存储数据每个打开的标记需要一个匹配的结束标记，如需要，例如， 李四。如果一个元素没有内容，开始和结束标记可以组合成一个单一的“ 快捷方式”标签，如 。XML 标签是区分大小(case-sesintive) 写的。所以 应，或或任何其他变种相同（any other variant of t
21、he same）。您可以定义属性标签提供更详细的信息，例如，John Doe。这里 isPetName 是一个属性的名称元素。在 FusionCharts XT 的，我们四种属性：布尔 Boolean - 属性，可以采取 0 或 1 的值。像数字 Number - 采取一个数值的属性。像 字符 String - 一个字符串值的属性。像 十六进制颜色代码 Hex Color Code - 一个十六进制的颜色代码（无编号）的属性。像将被替换的特殊字符，如（引号），“（双引号），（百分比）等由XML 转换。像特征性， ”（双引号）必须表示为一个字符串常量 "XML 文档是一个简单的文本文件，
22、由标签和与他们相关的数据。您可以弥补自己的标签，如存储数据FusionCharts XT 的每个图都有一个特定的 XML 结构。从广义上讲，我们定义的 XML 结构分为以下几种类型，根据图表类型：Single Series ChartsMulti-Series ChartsXY Plot ChartsMulti-series Stacked ChartsZoom Line chartFusionCharts XT and JSONFusionCharts 的 XT 也可以建立图表使用 JSON(JavaScript Object Notation)的数据格式。 JSON 是一种重量轻，易于阅读
23、和理解的简单的数据格式。虽然来自JavaScript 的，独立于语言的数据结构，可用于几乎所有的编程语言的编码器和解析器（encoders and parsers）。重要提示：要使用 JSON 数据格式与 FusionCharts XT 的，你将需要使用FusionCharts 的 JavaScript 类（FusionCharts.js ）嵌入图表，图表内部仍然使用 XML。 JavaScript 类提供 JSON 和 XML 之间的桥梁。 以下 JSON 数据了解一些基本的东西： JSON 数据是基于文本的格式键由数据键和值对组成 key : value。这些值具有与之相关的数据 可以弥补
24、自己的键 - 值对像如： name : “John Doe“来存储数据 每个 JSON 数据是笼罩大括号和数据键值对是逗号分隔，如 firstName : “John“ , lastName: “Doe“ .。在 JavaScript 中，这种格式被称为对象 一个键可以是单个或双引号内的值，例如， “name“ : “John Doe“ 您可以使用对象作为值。例如， “employee“ : “name“ : “John Doe“ , “department“ : “Project Manager“ , “age“ : 35 o JSON，基本数据类型是： 数字（整数或实） 字符值（双引号的反
25、斜杠转义的 Unicode 字符串） 布尔值（1 或 0 FusionCharts 的 JSON） 空 阵列（数目值的有序序列，字符串，布尔值，空值，对象或数组类型，用逗号分开，方括号中） ，例如 “employees“ : “Employees“ , “name“ : “John Doe“ , 35 对象（键：值对的集合，用逗号分隔，并在大括号内的值可以是数字，字符串，布尔值，空值，对象或数组类型） ，如 “employee“ : “name“ : “John Doe“ , “department“ : “Project Manager“ , “age“ : 35 一个 FusionChar
26、ts XT 的图是由一个单一的 JSON 数据源控制，也就是说，相同的数据源包含画图的数据，功能设置和外观属性。，您可以定义每个图表类型的很多属性。然而，这是没有必要定义的所有属性，对于一个给定的图表。例如，如果你不想更改默认设置画布（颜色，透明度等），你没有定义任何财产画布 - 将被假定为默认值。因此，每一个图表中可以使用最小的属性。同 上FusionCharts XT 的使用 JavaScript APIFusionCharts XT and JavaScript OverviewFusionChartsXT 为更好的集成和控制提供了高度增强的 JavaScript 类。它和JavaScr
27、ipt/ AJAX 的无缝结合让你实现以下的作用：1。你现有的 Flash 图表实现自动呈现为纯 JavaScript 图表 iPhone/ iPad 或相关设备2。你可以创建纯 JavaScript 图表（不是 Flash）3 您可以使用面向对象的 JavaScript 实现的方法，并使用新的对象，静态方法，属性，常量 FusionCharts XT 的相关4 你可以使用静态函数 FusionCharts 的访问所有的图表实例呈现在一个页面5 您可以使用更好的和先进的 JavaScript 事件模型（使用 addEventListener 功能）听的所有事件。 FusionCharts 的
28、XT 配备了一台主机的事件，您可以使用6 您可以配置和创建LinkedCharts，在 v3.2 智能钻取功能介绍7 .还引入了更好的打印支持所有基于 Mozilla 的浏览器使用的属主类8.现在您可以轻松地处理加载数据通过 HTTPS 或使用 Internet Explorer 的安全协议9 你可以更优化处理基于 UTF-8 多语言文本10.它提供了更好的支持，更好的错误管理和调试11.您可以改变现有图表的属性12.您可以提供图表 JSON 格式的数据13。应缴可以更新现有图表的数据用图表的原生的 AJAX 功能或浏览器的 AJAX 支持14 它提供 API 来获取数据，从图表中的 XML
29、/ JSON/ CSV 格式15. 它提供 API 函数像 isActive（）来检查渲染状态图表16.您可以克隆一个现有图表的配置17 你可以处置和清理图表对象并释放尽可能多的内存可能FusionCharts XT and JavaScript integrationFusionCharts XT 的是没有更多的闪存！它是 Flash+ JavaScript 的。 JavaScript 中，一方面，作为一个辅助类的 Flash 图表，这些图表中添加更多的功能。另一方面，JavaScript 的作为一个渲染纯 JavaScript 图表。使用 FusionCharts 的 XT 和 JavaS
30、cript 的结合，你可以向最终用户提供一个无缝的体验。在这里，我们将讨论如何整合这两种技术产生最好的结果。在你移动的例子之前，请确保您已经安装 Flash 播放器的全球安全设置，这样你就不会遇到任何问题时，当地实施 FusionCharts XT 的使用 JavaScript。The First StepBefore you start with any of our examples, you need to ensure that you have the following things ready for use:1. Chart SWF Files - Present in Dow
31、nload Package Charts folder2. FusionCharts JavaScript Class Files (FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js and jquery.min.js) - present in Download Package Charts folderImplementationIn the following pages we will learn how FusionCharts JavaScript classes integrate with Fusion
32、Charts XT. We will learn how to: Create charts using various methods Update data of existing charts and properties Get data and properties from charts Listen to various chart events Create LinkedCharts that allow for unlimited drilldowns without a line of code Use PrintManager for better printing on
33、 Mozilla based browsers Export charts as image/PDF创建向下钻取图表和 LinkedCharts增加向下钻取图表链接FusionChartsXT 组的所有图表（除变焦线图）都支持下钻功能。这意味着，您可以将单个数据图（列在柱图，馅饼片饼图等）或整个图表转换成热点（或链接）。这些东西，点击后可以打开网址，调用 JavaScript 函数或加载LinkedCharts 的。从广义上讲，向下钻取的功能可以被分为两种类型：1。简单链接：向下钻取打开简单的 URL 或调用 JavaScript 函数（同一页上）2. Chart 链接（ LinkedChar
34、ts）：向下钻取详细 LinkedCharts，使用 FusionCharts XT 的，你可以创造无限向下钻取水平。一直保持非常通用的，以容纳所有类型的要求。使用 FusionCharts XT 的，你可以创造无限水平向下钻取。一直保持非常通用的，以容纳所有类型的要求。Using Simple Links使用简单的链接，你可以提供链接的页面的一个网址（或 JavaScript 函数）为每个数据项在图表（列，行锚，锚区饼切片等）。简单的链接可以有各种不同的格式： Simple links that open URL in the same pageDefining links for a Ch
35、artTo define a simple link for any dataplot, just define the link attribute for the element as under:XML Example: Simple links that open URL in a new browser window add n- before any link.For example,Example XML: Links that open URL in a specified frame/iframe要做到这一点，你只要指定链接本身的框架的的名称。当创建模拟的明细报表和仪表板时，
36、此功能是非常有用的。To open link in a specified frame, you need to set the link as under:提前注意：您可以提供_parent 作为框架的名称。这个 URL 将会在这个框架或浏览器窗口中加载，他是当前窗口的父窗口。通常情况下，主要的浏览器空间变得父框架，它包含所有的帧。因此，如果你想删除所有帧和加载新鲜的 URL相同的位置上，你可以使用_parent 框架的名称。XML Example: Links that open URL in a new pop-up window（在弹出窗口中打开链接）To open a link in
37、 pop-up window, you need to define the link as under:Sample XML: Links that invoke JavaScript functions (present either in FusionCharts JavaScript class or on the same web page)也就是说，当观众在图表上点击一个数据元素时，你可以在同一个页面调用一个 JavaScript 函数结束。FusionCharts XT provides two ways of setting JavaScript functions as li
38、nks:j- prefix For example, 2.JavaScript: prefixFor example, Set the whole chart as a hot-spot and apply any of the above simple-link features(设置整个图表作为一个热点，并适用于任何上述简单的链接功能)从 FusionCharts XT，你还可以设置全图作为一个单一的热点。这是非常有用的，当你想图表显示一个小的缩略图，点击它时打开一个详细的大图To set the entire chart as a hotspot, just specify the ta
39、rget link in clickURL attribute of element as under:您 可 以 再 次 指 定 五 种 方 式 中 的 链 接 ：1。 简 单 链 接 在 同 一 窗 口 中 打 开2。 简 单 链 接 在 新 窗 口 打 开3.连 接 到 另 一 框 架4 在 新 的 弹 出 窗 口 4.Link 开 幕5.Existing JavaScript 函 数 被 调 用 （ 在 同 一 页 上 ） 的 链 接如 果 设 置 整 个 图 表 作 为 热 点 ， 在 图 表 上 的 其 他 环 节 （ 个 别 环 节 的 数 据 图 ） 将 无 法正 常 工 作E
40、xample XML:注：内部图表解码设置为链接的 URL。在调用链接再次编码的 URL。如果通过URL 传递多语言字符或不想由图解码编码机制来处理，你可以设置unescapeLinks= 0在图表的 XML 数据元素。如果您使用的 JSON 数据，你需要使用 “chart“ : “unescapeLinks“ : “0“ . . .Creating simple links using XMLYou can convert a data plot into a link simply by introducing the link attribute into the element. He
41、re is an example:Creating links using JSONSimilarly, if you are using JSON data instead of XML, you must add the link property to the data object in the following way:“chart“:“caption“:“Monthly Sales Summary“,“subcaption“:“For the year 2006“,“xaxisname“:“Month“,“yaxisname“:“Sales“,“numberprefix“:“$“
42、,“data“: “label“:“Jan“, “value“:“17400“, “link“:“DemoLinkPages/DemoLink1.html“ , “label“:“Feb“, “value“:“19800“, “link“:“n-DemoLinkPages/DemoLink2.html“ , “label“:“Mar“, “value“:“21800“, “link“:“F-detailsFrame-DemoLinkPages/DemoLink3.htm“ , “label“:“Apr“, “value“:“23800“, “link“:“P-detailsPopUp,widt
43、h=400,height=300,toolbar=no,“ +“scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html“ , “label“:“May“, “value“:“29600“, “link“:“j-myJavaScriptFunction-parameters“ Using LinkedCharts这是一个简单的方法，建设向下钻取图表，详细的图表可以替换父图表或打开一个单独的对话框。该功能还允许向下钻取图表从一个单一的数据源的配置。的过程中已经详细解释了在翻页。FusionCharts XT 的引入了一个新的智能向下钻取的功能
44、 - LinkedCharts - 允许你创造无限级别的向下钻取图表，用一个单一的数据源。所有链接来自父图表和数据，全面包含数据或 URL 的所有后续数据（孩子，大的孩子）图表。当点击父图的数据图（柱图，饼图等），用户可以向下钻取到后代图表。后裔图表（或孩子图表）可以替换父图与选项钻取，可以打开新的对话框或框架。How to render?（如何呈现）要创建 LinkedCharts，你需要按照下列步骤操作：首先，为父辈图表创建 XML/ JSON 数据。这就是所谓的父数据源，并全面包含数据的 String 或数据 URL 的所有后续图表。接下来，在父数据源内为所有的后代图表添加数据字符串或数
45、据 URL。如果数据串的方法使用，每个后代图表的数据被嵌入在父数据源和链接采用独特的数据标识符。你已经完成了。是的，不需要额外的代码！详细请看：http:/ CSV 导出图表Exporting Charts as PDF or ImagesFusionCharts 的 XT，您可以导出您的图表，图像，PDF，还可以选择是否在客户端或服务器端导出。Flash Export OverviewPure JavaScript rendering (HTML5) Export Overview详细请看：http:/ Chart Data using context menuFusionCharts XT
46、 的允许您从您的图表数据以 CSV 格式导出。出口数据可以触发方式有两种：对于 Flash 图表使用上下文菜单中的图表，生成的 CSV 数据复制到剪贴板。这是不支持的 JavaScript 图表使用 FusionCharts 的 JavaScript API 的数据导出，在你的 JavaScript 代码作为字符串返回 CSV 数据Setting up the chart to export data from context menu To allow export of data using context menu, you need to specify the following i
47、n data: XML JSON详细请看：http:/ 的 XT 是如何工作的？正如你必须已经知道现在， FusionCharts XT 只接受 XML 或 JSON 数据来绘制图表。你可以提供物理的 XML 或 JSON 数据文件或通过服务器端脚动态传递数据给 FusionChartsXT。在这里，我们探索各种方法，使用它可以提供数据 FusionCharts XT 的。请注意，您永远不需要保存物理服务器上的 XML 或 JSON 文件。当从您的数据库生成动态图表，XML 或 JSON 文件内置存储器（变量）中使用字符串串联或我们的 API 方法，然后动态传递（写入到输出流，像其他的 HTM
48、L 内容）。There are two ways using which you can provide data to FusionCharts XT:1。数据的 URL 的方法 - 在这种方法中，一个 URL 作为数据源所提供的图表。图表，加载或更新时，调用此 URL，并读取该 URL 的 XML 或 JSON 数据写入。该 URL 可以是一个物理文件包含 XML 或 JSON 或一个脚本文件，从动态数据源，如数据库动态生成 XML 或 JSON，饲料等。下面的插图将引导您通过在数据 URL 方法所涉及的步骤：2。数据字符串的方法 - 在这种方法中，整个图表数据（ XML 或 JSON）是作以字符串提供的并且作为图标嵌入到同一个页面。当图表加载或更新时，它只是读取的数据串并呈现。在这里，XML 或 JSON 数据被直接嵌入到 HTML 页面中，从而完全跳过外部数据文件的需要。下面的插图将引导您通过数据串中的方法所涉及的步骤：.详情请看：http:/
