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 JSP

FusionCharts XT的,可以有效地使用JSP绘制动态数据驱动的图表。在这个页面中,我们将讨论,

1、如何设置FusionCharts XT的J2EE环境。
2、如何嵌入FusionCharts XT到现有Web应用程序。

1、如何设置FusionCharts XTJ2EE环境中

步骤:

将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里的代码:

<%@ taglib uri="http://www.fusioncharts.com/jsp/core" prefix="fc" %>
  <jsp:useBean id="chartData" class="com.fusioncharts.sampledata.BasicRenderData"/>
  <fc:render chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.swfFilename}"
  width="${chartData.width}" height="${chartData.height}" debugMode="false"
  registerWithJS="false" xmlUrl="${chartData.url}" />

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示例如下图所示:

<chart caption='Monthly Unit Sales'
    xAxisName='Month' yAxisName='Units' showValues='0'
     formatNumberScale='0' showBorder='1'>
      <set label='Jan' value='462' />
      <set label='Feb' value='857' />
      <set label='Mar' value='671' />
      <set label='Apr' value='494' />
      <set label='May' value='761' />
      <set label='Jun' value='960' />
      <set label='Jul' value='629' />
      <set label='Aug' value='622' />
      <set label='Sep' value='376' />
      <set label='Oct' value='494' />
      <set label='Nov' value='761' />
      <set label='Dec' value='960' />
  </chart>

 

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. Let's see how the change is incorporated in the HTML code (in your web page).

Changing chart's 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 chart's 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 values

Setting width and height in percent values

Dynamic resize feature of charts

 

配置图表的背景,帆布,字体,标题,数据图,标签,值,轴,传说,填充和利润率,和数字格式

 

Customizing Background colors

<chart bgColor='999999,FFFFFF' bgAlpha='50' ...>

Customizing Chart Border

You 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  borderAlpha

<chart ... showBorder='1' borderColor='FF0000' borderThickness='2' borderAlpha='50' ..>

Using 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 Background

all you need to do is set bgImage property of <chart> element. The code to embed the image is as shown below:

XML:<chart bgImage='pizza.jpg' >

...

</chart>

 

JSON:{"chart":{    
    "bgImage":"pizza.jpg"
},
  ...
}  
Setting background as transparent
 
Applying effects to background
 
XML/JSON Attributes for Chart Canvas(画布)

 

XML/JSON Attributes for Legend(只在多系列和组合图标中)

在多系列/组合图表中,每个数据集的系列名称显示在图表的图例。这有助于你有关数据图系列的名称,它的颜色。图例不会出现单系列的图表,因为图表中只有一个序列。

从FusionCharts XT,图例是互动的。也就是说,当你点击每个图例图标,隐藏该项目对应的数据集。在下面的例子中,利润的图例图标被点击,导致下面的图表。注意如何盈利图标也被转换为灰度。显示区域回来,你再次点击这个图标。

showLegend="1"

 

Number Formatting in FusionCharts XT

FusionCharts的XT提供了很多的选择在图表上的数字格式。您可以配置号码前缀和后缀,小数,根据预先定义的规模数字和缩放。在本节中,我们将看到的数字格式属性FusionCharts XT的支持,并期待在下一节成数字缩放。

使用XMLJSON作为数据源
FusionCharts XT and XML

FusionCharts XT使用XML或JSON数据来渲染图表。在这两种数据格式,数据文件(或字符串)包含要呈现的数据,图表设置和化妆品。

       XML是一种简单和结构化的语言,这是很容易阅读和理解。下面给出的是XML的基础知识:

XML文档是一个简单的文本文件,由标签和与他们相关的数据组成。

您可以用自己的标签,如<mytag></ mytag>存储数据

每个打开的标记需要一个匹配的结束标记,如<name>需要</name>,例如, <name>李四</name>。如果一个元素没有内容,开始和结束标记可以组合成一个单一的“快捷方式”标签,如<name/>。
    XML标签是区分大小(case-sesintive)写的。所以<name>应</name>,<NAME>或</NAME>或任何其他变种相同(any other variant of the same)。
    您可以定义属性标签提供更详细的信息,例如,<name isPetName='1'>John Doe</name>。这里isPetName是一个属性的名称元素。在FusionCharts XT的,我们四种属性:
布尔Boolean - 属性,可以采取0或1的值。像<chart showLabels='1'>
数字Number - 采取一个数值的属性。像<chart yAxisMaxValue='200'>
字符String - 一个字符串值的属性。像<chart caption='My Chart'>
十六进制颜色代码Hex Color Code - 一个十六进制的颜色代码(无编号)的属性。像<chart bgColor='FFFFDD'>
    将被替换的特殊字符,如'(引号),“(双引号),%(百分比)等由XML转换。像特征性,”(双引号)必须表示为一个字符串常量&quot

XML文档是一个简单的文本文件,由标签和与他们相关的数据。
您可以弥补自己的标签,如<mytag></ mytag>存储数据
FusionCharts XT的每个图都有一个特定的XML结构。从广义上讲,我们定义的XML结构分为以下几种类型,根据图表类型:

Single Series Charts

Multi-Series Charts

XY Plot Charts
Multi-series Stacked Charts

Zoom Line chart

FusionCharts XT and JSON

FusionCharts的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 } }
  • 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 API

FusionCharts XT and JavaScript Overview

FusionChartsXT为更好的集成和控制提供了高度增强的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 integration

FusionCharts XT的是没有更多的闪存!它是Flash+ JavaScript的。 JavaScript中,一方面,作为一个辅助类的Flash图表,这些图表中添加更多的功能。另一方面,JavaScript的作为一个渲染纯JavaScript图表。
使用FusionCharts的XT和JavaScript的结合,你可以向最终用户提供一个无缝的体验。在这里,我们将讨论如何整合这两种技术产生最好的结果。

在你移动的例子之前,请确保您已经安装Flash播放器的全球安全设置,这样你就不会遇到任何问题时,当地实施FusionCharts XT的使用JavaScript。

The First Step

Before 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 folder
  2. FusionCharts JavaScript Class Files (FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js and jquery.min.js) - present in Download Package > Charts folder

Implementation

In 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 page

Defining links for a Chart

To define a simple link for any dataplot, just define the link attribute for the <set> element as under:
<set ... value='2235' ... link='ShowDetails.asp%3FMonth%3DJan' ...>

XML Example:

<chart caption='Monthly Sales Summary'
      subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
          <set label='Jan' value='17400' link='DemoLinkPages/DemoLink1.html'/>
          <set label='Feb' value='19800' link='DemoLinkPages/DemoLink2.html'/>
          <set label='Mar' value='21800' link='DemoLinkPages/DemoLink3.html'/>
          <set label='Apr' value='23800' link='DemoLinkPages/DemoLink4.html'/>
          <set label='May' value='29600' link='DemoLinkPages/DemoLink5.html'/>
          <set label='Jun' value='27600' link='DemoLinkPages/DemoLink6.html'/>
      </chart>

 

  • Simple links that open URL in a new browser window

add n- before any link.

For example,

<set ... value='2235' ... link='n-ShowDetails.asp%3FMonth%3DJan' ...>

Example XML:

<chart caption='Monthly Sales Summary'
      subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
          <set label='Jan' value='17400' link='n-DemoLinkPages/DemoLink1.html'/>
          <set label='Feb' value='19800' link='n-DemoLinkPages/DemoLink2.html'/>
          <set label='Mar' value='21800' link='n-DemoLinkPages/DemoLink3.html'/>
          <set label='Apr' value='23800' link='n-DemoLinkPages/DemoLink4.html'/>
          <set label='May' value='29600' link='n-DemoLinkPages/DemoLink5.html'/>
          <set label='Jun' value='27600' link='n-DemoLinkPages/DemoLink6.html'/>
      </chart>

 

 

  • Links that open URL in a specified frame/iframe

要做到这一点,你只要指定链接本身的框架的的名称。当创建模拟的明细报表和仪表板时,此功能是非常有用的。

To open link in a specified frame, you need to set the link as under:

<set ... value='2235' link='F-FrameName-ShowDetails.asp%3FMonth%3DJan' ... >

提前注意:您可以提供_parent作为框架的名称。这个URL将会在这个框架或浏览器窗口中加载,他是当前窗口的父窗口。通常情况下,主要的浏览器空间变得父框架,它包含所有的帧。因此,如果你想删除所有帧和加载新鲜的URL相同的位置上,你可以使用_parent框架的名称。

XML Example:

<chart caption='Monthly Sales Summary'
      subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
         <set label='Jan' value='17400' link='F-detailsFrame-../DemoLinkPages/DemoLink1.html'/>
         <set label='Feb' value='19800' link='F-detailsFrame-../DemoLinkPages/DemoLink2.html'/>
         <set label='Mar' value='21800' link='F-detailsFrame-../DemoLinkPages/DemoLink3.html'/>
         <set label='Apr' value='23800' link='F-detailsFrame-../DemoLinkPages/DemoLink4.html'/>
         <set label='May' value='29600' link='F-detailsFrame-../DemoLinkPages/DemoLink5.html'/>
         <set label='Jun' value='27600' link='F-detailsFrame-../DemoLinkPages/DemoLink6.html'/>
      </chart>

 

 

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:

<set .. value='235' link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetails.asp%3FMonth%3DJan" />

Sample XML:

<chart caption='Monthly Sales Summary'
      subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
         <set label='Jan' value='17400' link='P-detailsPopUp,width=400,height=300,toolbar=no,
      scrollbars=no,resizable=no-DemoLinkPages/DemoLink1.html'/>
    <set label='Feb' value='19800' link='P-detailsPopUp,width=400,height=300,toolbar=no,
      scrollbars=no,resizable=no-DemoLinkPages/DemoLink2.html'/>
    <set
      label='Mar' value='21800' link='P-detailsPopUp,width=400,height=300,toolbar=no,
      scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html'/>
    <set label='Apr' value='23800' link='P-detailsPopUp,width=400,height=300,toolbar=no,
      scrollbars=no,resizable=no-DemoLinkPages/DemoLink4.html'/>
    <set label='May' value='29600' link='P-detailsPopUp,width=400,height=300,toolbar=no,
         scrollbars=no,resizable=no-DemoLinkPages/DemoLink5.html'/>
         <set label='Jun' value='27600' link='P-detailsPopUp,width=400,height=300,toolbar=no,
      scrollbars=no,resizable=no-DemoLinkPages/DemoLink6.html'/>
 </chart>

 

  • 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,

<set label='USA' value='235' link="j-myJS-USA,235"/>

2.JavaScript: prefix

For example,

<set label='USA' value='235' link="JavaScript: isJavaScriptCall=true; alert('hi JS!'); myJS('USA',235);"/>

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 <chart> element as under:

<chart ... clickURL='DetailedChart.html' ...>

您可以再次指定五种方式中的链接:

1。简单链接在同一窗口中打开
2。简单链接在新窗口打开
3.连接到另一框架
4 在新的弹出窗口4.Link开幕
5.Existing JavaScript函数被调用(在同一页上)的链接
如果设置整个图表作为热点,在图表上的其他环节(个别环节的数据图)将无法正常工作

Example XML:

<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'
      clickURL='n-http://www.fusioncharts.com'>
         <set label='Jan' value='17400' />
         <set label='Feb' value='19800' />
         <set label='Mar' value='21800' />
         <set label='Apr' value='23800' />
         <set label='May' value='29600' />
         <set label='Jun' value='27600' />
      </chart>

窗体顶端

注:内部图表解码设置为链接的URL。在调用链接再次编码的URL。如果通过URL传递多语言字符或不想由图解码编码机制来处理,你可以设置unescapeLinks= '0'在<chart>图表的XML数据元素。如果您使用的JSON数据,你需要使用{ "chart" : { "unescapeLinks" : "0" ... } ... } .

Creating simple links using XML

You can convert a data plot into a link simply by introducing the link attribute into the <set> element. Here is an example:

<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'><set label='Jan' value='17400'link='DemoLinkPages/DemoLink1.html'/> <!-- Simple Link --><set label='Feb' value='19800' link='n-DemoLinkPages/DemoLink2.html'/> <!-- Link in new window --><set label='Mar' value='21800' link='F-detailsFrame-DemoLinkPages/DemoLink3.htm'/> <!-- Link in a frame --><set label='Apr' value='23800' link='P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html'/> <!-- Link in a pop-up --><set label='May' value='29600' link='j-myJavaScriptFunction-parameters'/> <!-- JavaScript function as link -->
</chart>

Creating links using JSON

Similarly, 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":"$"
  },
  "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,width=400,height=300,toolbar=no," +
         "scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html" },
    { "label":"May", "value":"29600", "link":"j-myJavaScriptFunction-parameters"  }
  ]

Using LinkedCharts

这是一个简单的方法,建设向下钻取图表,详细的图表可以替换父图表或打开一个单独的对话框。该功能还允许向下钻取图表从一个单一的数据源的配置。的过程中已经详细解释了在翻页。

FusionCharts XT的引入了一个新的智能向下钻取的功能 - LinkedCharts - 允许你创造无限级别的向下钻取图表,用一个单一的数据源。所有链接来自父图表和数据,全面包含数据或URL的所有后续数据(孩子,大的孩子)图表。当点击父图的数据图(柱图,饼图等),用户可以向下钻取到后代图表。后裔图表(或孩子图表)可以替换父图与选项钻取,可以打开新的对话框或框架。

How to render?(如何呈现)

要创建LinkedCharts,你需要按照下列步骤操作:

首先,为父辈图表创建XML/ JSON数据。这就是所谓的父数据源,并全面包含数据的String或数据URL的所有后续图表。
    接下来,在父数据源内为所有的后代图表添加数据字符串或数据URL。如果数据串的方法使用,每个后代图表的数据被嵌入在父数据源和链接采用独特的数据标识符。
你已经完成了。是的,不需要额外的代码!

<chart caption="Yearly sales" xAxisName="Year" yAxisName="Sales"><set label="2004" value="37800" link="newchart-xml-2004-quarterly" /><set label="2005" value="21900" link="newchart-xml-2005-quarterly" /><set label="2006" value="32900" link="newchart-xml-2006-quarterly" /><set label="2007" value="39800" link="newchart-xml-2007-quarterly" />

<linkeddata id="2004-quarterly"><chart caption="Quarterly Sales Summary" subcaption="For the year 2004"xAxisName="Quarter" yAxisName="Sales"><set label="Q1" value="11700" /><set label="Q2" value="8600" /><set label="Q3" value="6900" /><set label="Q4" value="10600" /></chart></linkeddata>

<linkeddata id="2005-quarterly"><chart caption="Quarterly Sales Summary" subcaption="For the year 2005"xAxisName="Quarter" yAxisName="Sales"><set label="Q1" value="5500" /><set label="Q2" value="7100" /><set label="Q3" value="3900" /><set label="Q4" value="5400" /></chart></linkeddata>

<linkeddata id="2006-quarterly"><chart caption="Quarterly Sales Summary" subcaption="For the year 2006"xAxisName="Quarter" yAxisName="Sales"><set label="Q1" value="6700" /><set label="Q2" value="9200" /><set label="Q3" value="10800" /><set label="Q4" value="6200" /></chart></linkeddata>

<linkeddata id="2007-quarterly"><chart caption="Quarterly Sales Summary" subcaption="For the year 2007"xAxisName="Quarter" yAxisName="Sales"><set label="Q1" value="8900" /><set label="Q2" value="6600" /><set label="Q3" value="11200" /><set label="Q4" value="13100" /></chart></linkeddata>

</chart>

详细请看:http://docs.fusioncharts.com/charts/


图像或CSV导出图表

Exporting Charts as PDF or Images

FusionCharts的XT,您可以导出您的图表,图像,PDF,还可以选择是否在客户端或服务器端导出。

Flash Export Overview

Pure JavaScript rendering (HTML5) Export Overview

详细请看:http://docs.fusioncharts.com/charts/

Exporting Chart Data using context menu

FusionCharts XT的允许您从您的图表数据以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 in data:

  • XML
  • JSON

<chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$' useRoundEdges='1' showExportDataMenuItem='1'>
     <set label='Alex' value='25000'  />
     <set label='Mark' value='35000' />
     <set label='David' value='42300' />
     <set label='Graham' value='35300' />
     <set label='John' value='31300' />
  </chart>

详细请看:http://docs.fusioncharts.com/charts/

 


FusionCharts
XT是如何工作的?

正如你必须已经知道现在, FusionCharts XT只接受XML或JSON数据来绘制图表。你可以提供物理的XML或JSON数据文件或通过服务器端脚动态传递数据给FusionChartsXT。在这里,我们探索各种方法,使用它可以提供数据FusionCharts XT的。

请注意,您永远不需要保存物理服务器上的XML或JSON文件。当从您的数据库生成动态图表,XML或JSON文件内置存储器(变量)中使用字符串串联或我们的API方法,然后动态传递(写入到输出流,像其他的HTML内容)。

 

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://docs.fusioncharts.com/charts/

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/leecheeme/archive/2013/04/27/3046330.html

usionCharts 技术文档-Jsp画图相关推荐

  1. FusionCharts 技术文档-Jsp画图例子

    在本节中,我们将展示一些基本的例子,以帮助您开始. 我们将覆盖下面的例子在这里: 1.用预建立的data.xml在JSP使用FusionChartsXT(其中包含画图的数据) 2  使用数据字符串方法 ...

  2. (马世龙)Linux下CACTI完全搭建技术文档二

    续(马世龙)Linux下CACTI完全搭建技术文档一 6.完成cacti的安装 1. 首先检查一下rra/下面,有没有数据 2. snmpwalk -v 2c -c public ServerIP i ...

  3. java开发文档怎么写_程序员该不该写技术文档,怎么写文档,易懂又能提升自己...

    最近公司项目的调用量突然涨了一大波,很多系统都纷纷扛不住了,于是需要对系统进行优化,系统优化的第一步,便是梳理业务! 在这个过程中,经常出现了这样一些情况,发现数据库的某些字段,没有注释,也没有一定的 ...

  4. 如何写出优秀的技术文档?

    大家好,我是小枣君. 鲜枣课堂自从2017年5月开始正式创立,迄今已有3年多的时间.这一期间,我们的内容一直都坚持以技术类科普文章为主,输出了大约400多篇原创.其中绝大部分,都是我写的. 我的想法比 ...

  5. 程序员如何编写高大上且实用的技术文档--转

    原文链接:https://blog.csdn.net/qq_17324713/article/details/105895720?utm_term=%E7%A0%94%E5%8F%91%E6%8A%8 ...

  6. 爬虫_西电研究生教务系统_技术文档

    教务系统爬虫工作初步完成 关于教务系统的一系列爬取工作已经初步完成,Holi爬虫组的工作也算正式进入优化阶段. 我们需要根据后台组的需要,转换成CVS或数据库形式.需要和后台组进行商量. 实现的功能 ...

  7. 技术文档中的各种架构图该怎么画? by彭文华

    这是彭文华的第173篇原创 哎呀妈呀,现在催稿群里的要求越来越高了啊!你看看这哥们的要求,太难了好吗??? 不过这还真是系统架构师该干的事情.话说我最近写的东西的确有些偏了,我认真反省,坚决改正!感谢 ...

  8. 任天堂娱乐系统技术文档(屎王nes资料)

    Nintendo Entertainment System Basic Information 任天堂娱乐系统技术文档 0.01 版 发布于 2002 年 8 月 14 日 作者:Necrosaro ...

  9. [技术文档] 一劳永逸,用USB设备制作多系统引导

    2019独角兽企业重金招聘Python工程师标准>>> [技术文档] 一劳永逸,用USB设备制作多系统引导  [复制链接] binghe27 艺有所成 当前离线 主题 8  UID ...

  10. 不写技术文档是个什么梗

    写文档在工作中很常见了,正规的公司都有文档,除非是很简单的东西. 文档用来给新人或不熟悉的人的看,出需求也要文档.只凭笔在本子上划几下不能让人懂. 凡是稍微复杂的东西一定用文档梳理流程,有的还有流程图 ...

最新文章

  1. 一步带你了解java程序逻辑控制
  2. oracle集群rac无法访问,解决Oracle 11g R2 RAC 无法在客户端通过scanIP连接数据库
  3. Javascript 引擎工作机制(js层面梳理)
  4. BZOJ 2768 [JLOI2010]冠军调查
  5. 大三软件工程小项目-小技术集合-socket环境搭建
  6. [2019人工智能实战_廖盈嘉]第1次个人作业
  7. 如果华为完全没办法买到芯片,是否可以尝试做无芯手机?
  8. java更改reader字体颜色,Java 修改 文件内容 and BufferedReader 乱码问题
  9. scheme中文编程
  10. 2018年暑假第二周
  11. 网页跳转,转,出自:秋实的日积月累
  12. java前端导入excel_Java之导入Excel Vue框架前端篇
  13. 【板绘必读】完全0基础如何学板绘?
  14. 实现图片懒加载的方法
  15. 阿里巴巴android图标素材网,阿里巴巴图标素材库
  16. Cisco Packet Tracer 思科模拟器交换机的链路聚合技术
  17. 快速实现远程控制Android手机
  18. 行业:美团将在快手开放平台上线美团小程序
  19. 用python绘制熊猫图案_python – 有没有办法在ggplot中绘制一个熊猫系列?
  20. 使用rufus制作Windows Server 2008 U盘_wentfar·tsao

热门文章

  1. oracle索引用不了,oracle使用索引与不使用索引的性能详析
  2. 数据库与表的操作之创建、修改和删除数据
  3. [渝粤教育] 中央财经大学 金融学 参考 资料
  4. 算法与数据结构(一)-导学
  5. centos7.6(腾讯云)开放端口及配置腾讯云安全组
  6. 修改初始Manager QuerySets,重写Manager.get_query_set()函数之后,发现并没有按照我们指定的方法执行。...
  7. 从OpenGL ES 2.0到Direct3D 11.1之路
  8. [SRM] 09 撕书狂魔CZL
  9. 【转】打印机硬件发现不了解决办法
  10. 必做作业三:原型化系统-社区分享app