JSP画图+一些基本知识+FusionCharts.docx

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应用程序上下文，如果你已经改变的情况下，请修改它。运行的FactoryDBCreation.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/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:/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和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文件夹存在。请注意：，FusionCharts的JSP标签库（fctl.jar）取决于FusionCharts的的Helper类（fchelper.jar），（所以总是包括在classpath中fchelper.jar）2、如何嵌入FusionCharts XT到现有Web应用程序。您完成初始设置后，你剩下要做的是 - 使用FusionCharts的JSP标签嵌入到你的JSP中的图表，通过提供必要的属性。步骤：1、jsp中三段代码来（没有逻辑）嵌入图表。2、Bean提供图表的渲染的数据和数据源。JSP里的代码： Bean里的代码：（com.fusioncharts.sampledata.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从上面的类，你可以使用XML字段或URL字段提供你的JSP中的数据。如果您使用的是XML字段，然后将其值设置为一个有效的FusionCharts的XML。如果您使用的URL字段中，然后将data.xml放在 Data文件夹中。一个XML示例如下图所示： 用JSP使用FusionCharts XT的 - 基本例子FusionCharts XT可以有效地同JSP结合，来绘制动态数据驱动的图表。在这个例子中，我们将展示一些基本的例子来帮助你开始。即使与JSP一起使用时，FusionCharts XT在内用JavaScript和XML/ JSON渲染图表。JSP代码实际上可以帮助你的输出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 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, FusionCharts.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 (Creating an XML file is as easy as creating a text file using Windows Notepad or any other text editor. It is actually a plain text file with extension - xml) 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 file 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 its 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 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 default, 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 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 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，图例是互动的。也就是说，当你点击每个图例图标，隐藏该项目对应的数据集。在下面的例子中，利润的图例图标被点击，导致下面的图表。注意如何盈利图标也被转换为灰度。显示区域回来，你再次点击这个图标。showLegend=1Number Formatting in FusionCharts XTFusionCharts的XT提供了很多的选择在图表上的数字格式。您可以配置号码前缀和后缀，小数，根据预先定义的规模数字和缩放。在本节中，我们将看到的数字格式属性FusionCharts XT的支持，并期待在下一节成数字缩放。使用XML或JSON作为数据源FusionCharts XT and XMLFusionCharts XT使用XML或JSON数据来渲染图表。在这两种数据格式，数据文件（或字符串）包含要呈现的数据，图表设置和化妆品。XML是一种简单和结构化的语言，这是很容易阅读和理解。下面给出的是XML的基础知识：XML文档是一个简单的文本文件，由标签和与他们相关的数据组成。您可以用自己的标签，如存储数据每个打开的标记需要一个匹配的结束标记，如需要，例如， 李四。如果一个元素没有内容，开始和结束标记可以组合成一个单一的“快捷方式”标签，如。 XML标签是区分大小(case-sesintive)写的。所以应，或或任何其他变种相同（any other variant of the same）。 您可以定义属性标签提供更详细的信息，例如，John Doe。这里isPetName是一个属性的名称元素。在FusionCharts XT的，我们四种属性：布尔Boolean - 属性，可以采取0或1的值。像数字Number - 采取一个数值的属性。像字符String - 一个字符串值的属性。像十六进制颜色代码Hex Color Code - 一个十六进制的颜色代码（无编号）的属性。像 将被替换的特殊字符，如（引号），“（双引号），（百分比）等由XML转换。像特征性，”（双引号）必须表示为一个字符串常量"XML文档是一个简单的文本文件，由标签和与他们相关的数据。您可以弥补自己的标签，如存储数据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是一种重量轻，易于阅读和理解的简单的数据格式。虽然来自JavaScript的，独立于语言的数据结构，可用于几乎所有的编程语言的编码器和解析器（encoders and parsers）。重要提示：要使用JSON数据格式与FusionCharts XT的，你将需要使用FusionCharts的JavaScript类（FusionCharts.js）嵌入图表，图表内部仍然使用XML。 JavaScript类提供JSON和XML之间的桥梁。 以下JSON数据了解一些基本的东西： JSON数据是基于文本的格式键由数据键和值对组成key : value。这些值具有与之相关的数据 可以弥补自己的键 - 值对像如：name : John Doe来存储数据 每个JSON数据是笼罩大括号和数据键值对是逗号分隔，如 firstName : John , lastName: Doe .。在JavaScript中，这种格式被称为对象 一个键可以是单个或双引号内的值，例如， name : John Doe 您可以使用对象作为值。例如， employee : name : John Doe , department : Project Manager , age : 35 o JSON，基本数据类型是： 数字（整数或实） 字符值（双引号的反斜杠转义的Unicode字符串） 布尔值（1或0 FusionCharts的JSON） 空 阵列（数目值的有序序列，字符串，布尔值，空值，对象或数组类型，用逗号分开，方括号中），例如 employees : Employees , name : John Doe , 35 对象（键：值对的集合，用逗号分隔，并在大括号内的值可以是数字，字符串，布尔值，空值，对象或数组类型），如 employee : name : John Doe , department : Project Manager , age : 35 一个FusionCharts XT的图是由一个单一的JSON数据源控制，也就是说，相同的数据源包含画图的数据，功能设置和外观属性。，您可以定义每个图表类型的很多属性。然而，这是没有必要定义的所有属性，对于一个给定的图表。例如，如果你不想更改默认设置画布（颜色，透明度等），你没有定义任何财产画布 - 将被假定为默认值。因此，每一个图表中可以使用最小的属性。同上FusionCharts XT的使用JavaScript APIFusionCharts XT and JavaScript OverviewFusionChartsXT为更好的集成和控制提供了高度增强的JavaScript类。它和JavaScript/ AJAX的无缝结合让你实现以下的作用：1。你现有的Flash图表实现自动呈现为纯JavaScript图表iPhone/ iPad或相关设备2。你可以创建纯JavaScript图表（不是 Flash）3 您可以使用面向对象的JavaScript实现的方法，并使用新的对象，静态方法，属性，常量FusionCharts XT的相关4 你可以使用静态函数FusionCharts的访问所有的图表实例呈现在一个页面5 您可以使用更好的和先进的JavaScript事件模型（使用addEventListener功能）听的所有事件。 FusionCharts的XT配备了一台主机的事件，您可以使用6 您可以配置和创建LinkedCharts，在v3.2智能钻取功能介绍7 .还引入了更好的打印支持所有基于Mozilla的浏览器使用的属主类8.现在您可以轻松地处理加载数据通过HTTPS或使用Internet Explorer的安全协议9 你可以更优化处理基于UTF-8多语言文本10.它提供了更好的支持，更好的错误管理和调试11.您可以改变现有图表的属性12.您可以提供图表JSON格式的数据13。应缴可以更新现有图表的数据用图表的原生的AJAX功能或浏览器的AJAX支持14 它提供API来获取数据，从图表中的XML / JSON/ CSV格式15. 它提供API函数像isActive（）来检查渲染状态图表16.您可以克隆一个现有图表的配置17你可以处置和清理图表对象并释放尽可能多的内存可能FusionCharts XT and JavaScript integrationFusionCharts XT的是没有更多的闪存！它是Flash+ JavaScript的。 JavaScript中，一方面，作为一个辅助类的Flash图表，这些图表中添加更多的功能。另一方面，JavaScript的作为一个渲染纯JavaScript图表。使用FusionCharts的XT和JavaScript的结合，你可以向最终用户提供一个无缝的体验。在这里，我们将讨论如何整合这两种技术产生最好的结果。在你移动的例子之前，请确保您已经安装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 Download 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 FusionCharts 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 Mozilla based browsers Export charts as image/PDF创建向下钻取图表和LinkedCharts增加向下钻取图表链接FusionChartsXT组的所有图表（除变焦线图）都支持下钻功能。这意味着，您可以将单个数据图（列在柱图，馅饼片饼图等）或整个图表转换成热点（或链接）。这些东西，点击后可以打开网址，调用JavaScript函数或加载LinkedCharts的。从广义上讲，向下钻取的功能可以被分为两种类型：1。简单链接：向下钻取打开简单的URL或调用JavaScript函数（同一页上）2. Chart链接（LinkedCharts）：向下钻取详细LinkedCharts，使用FusionCharts XT的，你可以创造无限向下钻取水平。一直保持非常通用的，以容纳所有类型的要求。使用FusionCharts XT的，你可以创造无限水平向下钻取。一直保持非常通用的，以容纳所有类型的要求。Using Simple Links使用简单的链接，你可以提供链接的页面的一个网址（或JavaScript函数）为每个数据项在图表（列，行锚，锚区饼切片等）。简单的链接可以有各种不同的格式： Simple links that open URL in the same pageDefining links for a ChartTo 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要做到这一点，你只要指定链接本身的框架的的名称。当创建模拟的明细报表和仪表板时，此功能是非常有用的。To open link in a specified frame, you need to set the link as under:提前注意：您可以提供_parent作为框架的名称。这个URL将会在这个框架或浏览器窗口中加载，他是当前窗口的父窗口。通常情况下，主要的浏览器空间变得父框架，它包含所有的帧。因此，如果你想删除所有帧和加载新鲜的URL相同的位置上，你可以使用_parent框架的名称。XML Example: l Links that open URL in a new pop-up window（在弹出窗口中打开链接）To open a link in 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 links: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 target link in clickURL attribute of element as under:您可以再次指定五种方式中的链接：1。简单链接在同一窗口中打开2。简单链接在新窗口打开3.连接到另一框架4 在新的弹出窗口4.Link开幕5.Existing JavaScript函数被调用（在同一页上）的链接如果设置整个图表作为热点，在图表上的其他环节（个别环节的数据图）将无法正常工作Example XML: 窗体顶端注：内部图表解码设置为链