FusionCharts 技术文档-Jsp画图例子

在本节中，我们将展示一些基本的例子，以帮助您开始。

我们将覆盖下面的例子在这里：

1。用预建立的data.xml在JSP使用FusionChartsXT（其中包含画图的数据）
2  使用数据字符串方法，将上面的图表变成一个单页的图表。

3  使用HTML嵌入方法来渲染图表
4。创建纯JavaScript图表
5，使用JSON数据来创建图表
6。创建在一个页面中的多个图表
7.  创建透明图表
8. 为Mozilla浏览器设置管理打印

Setting up the charts for use

在我们的代码中，我们已经使用在Download Package > Code > FusionCharts文件夹中包含的图表。当你运行你的样品，你需要确保的SWF文件，在适当的位置。我们所有的JSP样品现在使用的自定义标签库和JSTL！所以，你会需要JSTL罐子，部署和测试这些应用程序。 JSTL JAR文件在Download Package > Code > J2EE > Web-Inf > lib文件夹中。请浏览在Download Package > Code > J2EE的Readme 文件夹。

Plotting a chart from data contained in Data.xml

让我们建立我们的第一个例子。在这个例子中，我们将创建一个“单位每月销售”图表，使用数据URL的方法。一开始，我们将手动编码在一个物理XML文件data.xml中的我们的XML数据，然后利用它在我们的图表包含在JSP页面中（SimpleChart.jsp）。

 

要绘制图表，消耗的这个数据，你需要包含的HTML代码嵌入Flash对象，然后提供必要的参数。为了让事情变得简单，我们已经创建了一个标签库，所有这些功能。所以，当你需要工作FusionCharts的XT在JSP中，只需在您的网页上，包括这个标签库，然后你可以FusionCharts XT的工作很容易。让我们来看看如何使用FusionCharts render标签。

SimpleChart.jsp

 

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.fusioncharts.com/jsp/core" prefix="fc" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<jsp:useBeanid="chartData"class="com.fusioncharts.sampledata.BasicRenderData"/>（获取数据）
<c:set var="folderPath" value="http://www.cnblogs.com/FusionCharts/"/>
<c:set var="title" value="FusionCharts - Simple Column 3D Chart" scope="request"/>
<c:set var="header1" value="FusionCharts - Examples" scope="request"/>
<c:set var="header2" value="Basic example using pre-built Data.xml" scope="request"/>
<c:set var="jsPath" value="${folderPath}" scope="request"/>
<c:set var="assetCSSPath" value="../assets/ui/css/" scope="request"/>
<c:set var="assetJSPath" value="../assets/ui/js/" scope="request"/>
<c:set var="assetImagePath" value="../assets/ui/images/" scope="request"/>
<%--
    chartId="myFirst";
    filename = "http://www.cnblogs.com/FusionCharts/Column3D.swf";
    url="Data/Data.xml";
    width="600";
    height="300";
--%>
<%-- Create the chart - Column 3D Chart with data from Data/Data.xml --%>
<tags:template2>
  <c:catch var="fcTagError">
    <fc:render chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.swfFilename}"
    width="${chartData.width}" height="${chartData.height}" debugMode="false"
    registerWithJS="false" xmlUrl="${chartData.url}" />
  </c:catch>
  <c:if test="${not empty fcTagError}">
      Tag Error: <br/>${fcTagError}
  </c:if>
</tags:template2>

正如你可以在上面看到的那样，我们有：

1  用BasicRenderData组件得到图表所需的数据。
2。用于fc:render标签，无论在哪里需要渲染图表。
3.  给这个标签传递合适的标签。
    有这个JSP中需要注意的几个部分。在这个JSP中，我们使用了以下内容：

1.JSTL核心标签库
2. FusionCharts custom tag library渲染图
3. Java bean提供渲染数据
4  JSP Tag files对所有的样本使用HTML模板，

正如你可以看到在这个页面中，我们大多已使用的<c:set><c:out>的标签从JSTL core tag library
我们强烈建议你去通过JSTL JSTL标签，我们已经用在我们的样本中，我们不会在这里讨论这些标签的更多信息，文档。

 

FusionCharts Custom JSP Tag Library

The above page contains a custom tag render to help us render the chart.

Here is the tag used to render the chart:

<fc:render chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.swfFilename}"
width="${chartData.width}" height="${chartData.height}" debugMode="false"
registerWithJS="false" xmlUrl="${chartData.url}" />
 

To this tag, you can provide the following attributes :

Parameter	Type	Mandatory?	Description
swfFilename	String	Yes	SWF File Name (and Path) of the chart which you intend to plot. Here, we are plotting a Column 3D chart. So, we have specified it as http://www.cnblogs.com/FusionCharts/Column3D.swf
chartId	String	Yes	ID for the chart, using which it will be recognized in the HTML page. Each chart on the page needs to have a unique Id. To provide cross-browser compatibility, we recommend you not to start the ID with a numerical value, nor use space as part of the ID.
chartWidth	String (number)	Yes	Intended width for the chart (in pixels)
chartHeight	String (number)	Yes	Intended height for the chart (in pixels)
xmlUrl	String	No	If you intend to use Data URL method for the chart, pass the URL to the xml as this attribute. For example, we can specify Data/Data.xml.
xmlData	String	No	If you intend to use Data String method for this chart, pass the XML data as this attribute.
jsonUrl	Boolean	No	If you intend to provide the json to the chart using Data URL method, pass the URL to the json as this attribute.
jsonData	Boolean	No	If you intend to use Data String method for this chart, pass the JSON data as this attribute.

For providing data, we have used the xmlUrl attribute. You can use xmlData, jsonUrl, jsonData or chartData, chartDataUrl in combination with dataFormat or data as part of the body of the tag.

Some of the more advanced configuration can be done using the following attributes: Click here to collapse and expand «

Parameter	Type	Mandatory?	Description
dataFormat	String	Mandatory when providing data as body content or via chartDataUrl or chartData attribute	The format of the given data. Currently, it can take values xml, xmlurl, json and jsonurl. If no value is provided for this option, then the tag might raise an error if neither of xmlUrl, xmlData, jsonUrl or jsonData values are provided.
chartDataUrl	"window"/"opaque"/ "transparent"	No	Window mode (the default mode) - here the chart or Flash Player acts as a separate window, always lying above the HTML elements. So the HTML elements, like the HTML menu, lie below the charts. Opaque mode - In this mode the charts are integrated to the HTML elements, unlike the Window mode. –Here, the DHTML elements can come over the chart. Transparent mode - Similar to the Opaque mode, however, in this mode, the chart background can be changed to transparent or translucent (modifying the value of the bgAlpha attribute accordingly) so that the color or the HTML elements below the chart (which are part of HTML and not chart) are visible
chartData	String (hex code without #)	No	Background color of the Flash movie (here chart) which comes below the chart and is visible if chart's background color is set to transparent or translucent using bgAlpha. It also comes as background color of the preloader state like when messages like "Loading chart", "retrieving data" "No data to display", etc. are shown. The format followed is: Hexcoded #RRGGBB color, for example, "#ff0000"
windowMode	"window"/"opaque"/ "transparent"	No	This is the default mode. Here the chart or Flash Player acts as a separate window, always lying above the HTML elements. So the HTML elements, like the HTML menu, lie below the charts. Opaque mode - In this mode the charts are integrated to the HTML elements, unlike the Window mode. –Here, the DHTML elements can come over the chart. Transparent mode - Similar to the Opaque mode, however, in this mode, the chart background can be changed to transparent or translucent c (modifying the value of the bgAlpha attribute accordingly) so that the color or the HTML elements below the chart (which are part of HTML and not chart) are visible.
bgColor	String (hex code without #)	No	Background color of the Flash movie (here chart) which comes below the chart and is visible if the chart's background color is set to transparent or translucent using bgAlpha. It also comes as background color of the pre loader state like when messages like "Loading chart", "retrieving data" "No data to display", etc. The format followed is: Hexcoded #RRGGBB color, for example, "#ff0000"
scaleMode	"noScale"/"exactFit"/ "noBorder"/"showAll"	No	"noScale" - this mode is set by default. It is also recommended to use this mode "exactFit" - this mode scales the chart to fit the container exactly with width and height (causes distortion in some cases) "noBorder" - this mode causes constrained scaling. (not recommended at all) "showAll"    - (not recommended)
lang	String - "true"/"false"	No	Language. The only available language is English (EN).
autoInstallRedirect	String - "true"/"false"	No	If set on, the user will be redirected to Adobe site if Flash player 8 is not installed.
detectFlashVersion	String - "true"/"false"	No	Checks the Flash Player version and if version is less than 8 and autoInstallRedirect is set on then asks the user to install Flash Player from Adobe site
renderer	flash/javascript	No	The renderer that is to be used to render the chart.
renderAt	String	No	The name of the container in which the chart is to be rendered. Usually, the tag renders the chart in a div called chartIdDiv

在这个SimpleChart.jsp，我们使用了XMLURL的属性来提供数据图表。

还有另一个类似的自定义标签作为FusionCharts定制的JSP标签库，这是的renderHTML标签的一部分提供。一小会儿后，我们将讨论renderHTML的标签。

JSP Tag files

标记文件仅仅是一个纯文本文件，文件扩展名.tag。 除JSP页面指令以外，所有常用的JSP元素可以用来tag文件内。tag文件可以用于在JSP模板。

    我们已使用的3称为template1.tag，template2.tag和template3.tag我们的样品标记文件。在Download Package > Code > J2EE > WEB-INF > tags文件夹，这些文件都存在。

的template1.tag文件包含简单的HTML模板标题，标题，介绍占位。
template2.tag文件包括FusionCharts.js的文件时，需要使用FC：render标签。
的template3.tag文件包括UTF-8的报头，它使用UTF-8的例子。

 

以粗体显示的一部分，这是在上述template.tag文件，是一个到另一个，从一个jsp的变化。的所有页面的HTML代码的其余部分保持不变，因此，实现了均匀性。

值的变量${header1}，$ {HEADER2}${intro}，${assetJSPath}，${assetImagePath}${title}，使用此模板的JSP。

 

Changing the above chart into a single page chart using Data String method

用这个Data String的方法来转换图表，我们用下面的代码在同一文件夹中创建另一个页面dataXML.jsp：

 

 

正如你可以在上面看到的那样，我们：
1 使用FC：render标签
2。为属性 chartId, width, height, swfFilename设定适当值。

3   当他们出色的标签体中的数据的一部分。在这里，我们手动编码的数据。在你的应用程序，你可以动态地构建了这个数据，通过查询数据库或外部的数据源。
    在这个例子中，代替使用XMLURL属性，我们已经提供了数据作为FC身体的一部分：渲染tag.When你看到这张图，你会得到相同的结果如上图所示。（In this example, instead of using the xmlUrl attribute, we have provided the data as part of the body of the fc:render tag.When you see this chart, you will get the same results as shown above. ）

Using FusionCharts HTML embedding method to render chart

 

您还可以使用HTML嵌入的方法创建图表。它创建HTML的<object>/<EMBED>标签，以渲染图。注意它不需要FusionCharts.js呈现。

同样，为了使事情简单，我们提供了fc:render HTML标签，所以你没有得到你的手脏，Flash和HTML。这个标签使用HTML嵌入图表。

现在让我们赶紧把用例子展示这个标签的作用。我们创建另一个JSP页面BasicChart.jsp的使用这个功能来从我们先前创建的data.xml文件中包含的数据绘制图表。它包含下面的代码：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.fusioncharts.com/jsp/core" prefix="fc"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<jsp:useBeanid="chartData"
class="com.fusioncharts.sampledata.BasicRenderData" />
<c:set var="folderPath" value="http://www.cnblogs.com/FusionCharts/" />
<c:set var="title" value="FusionCharts - Simple Column 3D Chart"
scope="request" />
<c:set var="header1" value="FusionCharts - Examples" scope="request" />
<c:set var="header2" value="Basic example using pre-built Data.xml"
scope="request" />
<c:set var="assetCSSPath" value="../assets/ui/css/" scope="request"/>
<c:set var="assetJSPath" value="../assets/ui/js/" scope="request"/>
<c:set var="assetImagePath" value="../assets/ui/images/" scope="request"/>
<%--Create the chart - Column 3D Chart with data from Data/Data.xml --%>
<%--
chartId="myFirst";
xmlUrl="Data/Data.xml";
width="600";
height="300";
swfFilename = "http://www.cnblogs.com/FusionCharts/Column3D.swf";
--%>
<tags:template1>
  <c:catch var="fcTagError">
    <fc:renderHTMLchartId="${chartData.chartId}"
    swfFilename="${folderPath}${chartData.swfFilename}"
    width="${chartData.width}" height="${chartData.height}"
    debugMode="false" xmlUrl="${chartData.url}" />
  </c:catch>
  <c:if test="${not empty fcTagError}">
    Tag Error! <br/>${fcTagError}
  </c:if>
</tags:template1>

正如你可以在上面看到的那样，我们有：

用途要求BasicRenderData的豆得到所需的数据图表。
2。用于FC：renderHTML的的标签，无论需要呈现图表。
3.Passed相应的属性这个标签。二手将XMLURL属性提供的URL的XML数据。
回到我们讨论的FC：renderHTML标签的，以下是接受这个标签的属性：

 

大多数这些属性类似于FC预期的属性：render标签。有几种方法，其中的数据可被提供给图表。在这里，我们看到了两种方法之一使用XMLURL属性和使用标签体。为了得到一个属性，可以用来提供数据的完整列表，请参阅标签说明页面。

上面的例子说明如何使用数据URL方法，您可以将数据加载。您可以随时使用数据字符串传递XML作为字符串使用XMLDATA属性的的renderHTML标签的方法。

 

Creating pure JavaScript charts

The code snippet below shows how you can achieve this:

<fc:render chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.swfFilename}" 

width="${chartData.width}" height="${chartData.height}" debugMode="false" 

registerWithJS="true" xmlUrl="${chartData.url}" renderer="javascript"/>

 

Using JSON data to create chart

Using jsonUrl :

 <fc:render chartId="${chartData.chartId}"

swfFilename="${folderPath}${chartData.swfFilename}"

width="${chartData.width}" height="${chartData.height}"

debugMode="false" registerWithJS="false"

jsonUrl="${chartData.jsonUrl}">

</fc:render>

Using jsonData:

<fc:render chartId="${chartData.chartId}"

swfFilename="${folderPath}${chartData.swfFilename}"

width="${chartData.width}" height="${chartData.height}"

debugMode="false" registerWithJS="false" dataFormat="json">

{ "chart": { "caption" : "Monthly Unit Sales", 

"xAxisName":"Month",

"yAxisName":"Units",

"showValues":"0",

"formatNumberScale":"0",

"showBorder":"1" }, 

"data": [ 

{"label":"Jan","value":"462"}, 

{"label":"Feb","value":"857"}, 

{"label":"Mar","value":"671"}, 

{"label":"Apr","value":"494"}, 

{"label":"May","value":"761"}, 

{"label":"Jun","value":"960"}, 

{"label":"Jul","value":"629"}, 

{"label":"Aug","value":"622"}, 

{"label":"Sep","value":"376"}, 

{"label":"Oct","value":"494"}, 

{"label":"Nov","value":"761"}, 

{"label":"Dec","value":"960"} 

]

}

</fc:render>

Creating multiple charts in a single page

在一个页面中创建多个图表是建立一个单一的图表一样容易。下面的代码显示了如何可以使用renderChart标签和创造尽可能多的图表，如你所愿。

<fc:render chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.swfFilename}"
width="${chartData.width}" height="${chartData.height}" debugMode="false"
registerWithJS="false" xmlUrl="${chartData.url}" /><BR><BR>
<%-- Now, create a Column2D Chart--%>
<fc:render chartId="${chartData.uniqueId}" swfFilename="${folderPath}${col2dChart}"
width="${chartData.width}" height="${chartData.height}" debugMode="false"
registerWithJS="false" xmlUrl="${chartData.url}" />
<BR>
<BR>
<%-- Now, create a Line2D Chart --%>
<fc:renderchartId="${chartData.uniqueId}" swfFilename="${folderPath}${lineChart}"
width="${chartData.width}" height="${chartData.height}" debugMode="false"
registerWithJS="false" xmlUrl="${chartData.url}" />

 

在上面的代码片段中可以看出，以放置在一个页面中的多个图表我们需要提供独特chartId值，为每个图表。

如果我们使用的是的BasicRenderData bean类来呈现数据用图表，那么getUniqueId的这个bean的属性定义如下

/**
* Returns a UniqueId
*
* @return the uniqueId
*/
public String getUniqueId() {
  int randomNum = (int) Math.floor(Math.random() * 100);
  uniqueId = "Chart" + "_" + randomNum;
  return uniqueId;
}

 

Creating transparent chart

您可以创建透明背景的图表。这使得图表显示，在它下面是什么样的HTML。要做到这一点，你需要做的请按照下列步骤操作：

1。图表的XML数据，设置<图... bgAlpha='0，0'..>
2.In renderChart/ renderChartHTML的标签，的windowMode属性设置为透明。
下面是一个示例代码，具有透明背景的图表：

Setting managed printing for Mozilla browsers

<fc:printManager enabled="true"></fc:printManager>

 

Listening to Print Manager status using JavaScript

 

详情请看：http://docs.fusioncharts.com/charts/

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