用JSP画图的基本列子翻译+FusionCharts.docx

用JSP画图的基本列子翻译+FusionCharts.docx

《用JSP画图的基本列子翻译+FusionCharts.docx》由会员分享，可在线阅读，更多相关《用JSP画图的基本列子翻译+FusionCharts.docx（12页珍藏版）》请在冰豆网上搜索。

用JSP画图的基本列子翻译+FusionCharts

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

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

1。

用预建立的data.xml在JSP使用FusionChartsXT（其中包含画图的数据）

2使用数据字符串方法，将上面的图表变成一个单页的图表。

3使用HTML嵌入方法来渲染图表

4。

创建纯JavaScript图表

5，使用JSON数据来创建图表

6。

创建在一个页面中的多个图表

7.创建透明图表

8.为Mozilla浏览器设置管理打印

Settingupthechartsforuse

在我们的代码中，我们已经使用在DownloadPackage>Code>FusionCharts文件夹中包含的图表。

当你运行你的样品，你需要确保的SWF文件，在适当的位置。

我们所有的JSP样品现在使用的自定义标签库和JSTL！

所以，你会需要JSTL罐子，部署和测试这些应用程序。

JSTLJAR文件在DownloadPackage>Code>J2EE>Web-Inf>lib文件夹中。

请浏览在DownloadPackage>Code>J2EE的Readme文件夹。

PlottingachartfromdatacontainedinData.xml

让我们建立我们的第一个例子。

在这个例子中，我们将创建一个“单位每月销售”图表，使用数据URL的方法。

一开始，我们将手动编码在一个物理XML文件data.xml中的我们的XML数据，然后利用它在我们的图表包含在JSP页面中（SimpleChart.jsp）。

要绘制图表，消耗的这个数据，你需要包含的HTML代码嵌入Flash对象，然后提供必要的参数。

为了让事情变得简单，我们已经创建了一个标签库，所有这些功能。

所以，当你需要工作FusionCharts的XT在JSP中，只需在您的网页上，包括这个标签库，然后你可以FusionChartsXT的工作很容易。

让我们来看看如何使用FusionChartsrender标签。

SimpleChart.jsp

<%@taglibprefix="c"uri="

<%@taglibprefix="c"uri="%>

<%@tagliburi="prefix="fc"%>

<%@taglibprefix="tags"tagdir="/WEB-INF/tags"%>

useBeanid="chartData"class="com.fusioncharts.sampledata.BasicRenderData"/>（获取数据）

setvar="folderPath"value="../../FusionCharts/"/>

setvar="title"value="FusionCharts-SimpleColumn3DChart"scope="request"/>

setvar="header1"value="FusionCharts-Examples"scope="request"/>

setvar="header2"value="Basicexampleusingpre-builtData.xml"scope="request"/>

setvar="jsPath"value="${folderPath}"scope="request"/>

setvar="assetCSSPath"value="../assets/ui/css/"scope="request"/>

setvar="assetJSPath"value="../assets/ui/js/"scope="request"/>

setvar="assetImagePath"value="../assets/ui/images/"scope="request"/>

<%--

  chartId="myFirst";

  filename="../../FusionCharts/Column3D.swf";

  url="Data/Data.xml";

  width="600";

  height="300";

--%>

<%--Createthechart-Column3DChartwithdatafromData/Data.xml--%>

template2>

catchvar="fcTagError">

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

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

  registerWithJS="false"xmlUrl="${chartData.url}"/>

catch>

iftest="${notemptyfcTagError}">

   TagError:

${fcTagError}

if>

template2>

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

1用BasicRenderData组件得到图表所需的数据。

2。

用于fc:

render标签，无论在哪里需要渲染图表。

3.给这个标签传递合适的标签。

有这个JSP中需要注意的几个部分。

在这个JSP中，我们使用了以下内容：

1.JSTL核心标签库

2.FusionChartscustomtaglibrary渲染图

3.Javabean提供渲染数据

4JSPTagfiles对所有的样本使用HTML模板，

正如你可以看到在这个页面中，我们大多已使用的

set>

out>的标签从JSTLcoretaglibrary

我们强烈建议你去通过JSTLJSTL标签，我们已经用在我们的样本中，我们不会在这里讨论这些标签的更多信息，文档。

FusionChartsCustomJSPTagLibrary

Theabovepagecontainsacustomtagrendertohelpusrenderthechart.

Hereisthetagusedtorenderthechart:

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

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

registerWithJS="false"xmlUrl="${chartData.url}"/>

Tothistag,youcanprovidethefollowingattributes:

Parameter

Type

Mandatory?

Description

swfFilename

String

Yes

SWFFileName（andPath）ofthechartwhichyouintendtoplot.Here,weareplottingaColumn3Dchart.So,wehavespecifieditas../../FusionCharts/Column3D.swf

chartId

String

Yes

IDforthechart,usingwhichitwillberecognizedintheHTMLpage.EachchartonthepageneedstohaveauniqueId.

Toprovidecross-browsercompatibility,werecommendyounottostarttheIDwithanumericalvalue,norusespaceaspartoftheID.

chartWidth

String（number）

Yes

Intendedwidthforthechart（inpixels）

chartHeight

String（number）

Yes

Intendedheightforthechart（inpixels）

xmlUrl

String

No

IfyouintendtouseDataURLmethodforthechart,passtheURLtothexmlasthisattribute.Forexample,wecanspecifyData/Data.xml.

xmlData

String

No

IfyouintendtouseDataStringmethodforthischart,passtheXMLdataasthisattribute.

jsonUrl

Boolean

No

IfyouintendtoprovidethejsontothechartusingDataURLmethod,passtheURLtothejsonasthisattribute.

jsonData

Boolean

No

IfyouintendtouseDataStringmethodforthischart,passtheJSONdataasthisattribute.

Forprovidingdata,wehaveusedthexmlUrlattribute.YoucanusexmlData,jsonUrl,jsonDataorchartData,chartDataUrlincombinationwithdataFormatordataaspartofthebodyofthetag.

Someofthemoreadvancedconfigurationcanbedoneusingthefollowingattributes:

Clickheretocollapseandexpand«

Parameter

Type

Mandatory?

Description

dataFormat

String

MandatorywhenprovidingdataasbodycontentorviachartDataUrlorchartDataattribute

Theformatofthegivendata.Currently,itcantakevaluesxml,xmlurl,jsonandjsonurl.Ifnovalueisprovidedforthisoption,thenthetagmightraiseanerrorifneitherofxmlUrl,xmlData,jsonUrlorjsonDatavaluesareprovided.

chartDataUrl

"window"/"opaque"/"transparent"

No

Windowmode（thedefaultmode）-herethechartorFlashPlayeractsasaseparatewindow,alwayslyingabovetheHTMLelements.SotheHTMLelements,liketheHTMLmenu,liebelowthecharts.

Opaquemode-InthismodethechartsareintegratedtotheHTMLelements,unliketheWindowmode.–Here,theDHTMLelementscancomeoverthechart.

Transparentmode-SimilartotheOpaquemode,however,inthismode,thechartbackgroundcanbechangedtotransparentortranslucent（modifyingthevalueofthebgAlphaattributeaccordingly）sothatthecolorortheHTMLelementsbelowthechart（whicharepartofHTMLandnotchart）arevisible

chartData

String（hexcodewithout#）

No

BackgroundcoloroftheFlashmovie（herechart）whichcomesbelowthechartandisvisibleifchart'sbackgroundcolorissettotransparentortranslucentusingbgAlpha.Italsocomesasbackgroundcolorofthepreloaderstatelikewhenmessageslike"Loadingchart","retrievingdata""Nodatatodisplay",etc.areshown.Theformatfollowedis:

Hexcoded#RRGGBBcolor,forexample,"#ff0000"

windowMode

"window"/"opaque"/"transparent"

No

Thisisthedefaultmode.HerethechartorFlashPlayeractsasaseparatewindow,alwayslyingabovetheHTMLelements.SotheHTMLelements,liketheHTMLmenu,liebelowthecharts.

Opaquemode-InthismodethechartsareintegratedtotheHTMLelements,unliketheWindowmode.–Here,theDHTMLelementscancomeoverthechart.

Transparentmode-SimilartotheOpaquemode,however,inthismode,thechartbackgroundcanbechangedtotransparentortranslucentc（modifyingthevalueofthebgAlphaattributeaccordingly）sothatthecolorortheHTMLelementsbelowthechart（whicharepartofHTMLandnotchart）arevisible.

bgColor

String（hexcodewithout#）

No

BackgroundcoloroftheFlashmovie（herechart）whichcomesbelowthechartandisvisibleifthechart'sbackgroundcolorissettotransparentortranslucentusingbgAlpha.Italsocomesasbackgroundcolorofthepreloaderstatelikewhenmessageslike"Loadingchart","retrievingdata""Nodatatodisplay",etc.Theformatfollowedis:

Hexcoded#RRGGBBcolor,forexample,"#ff0000"

scaleMode

"noScale"/"exactFit"/"noBorder"/"showAll"

No

"noScale"-thismodeissetbydefault.Itisalsorecommendedtousethismode

"exactFit"-thismodescalesthecharttofitthecontainerexactlywithwidthandheight（causesdistortioninsomecases）

"noBorder"-thismodecausesconstrainedscaling.（notrecommendedatall）

"showAll"   -（notrecommended）

lang

String-"true"/"false"

No

Language.TheonlyavailablelanguageisEnglish（EN）.

autoInstallRedirect

String-"true"/"false"

No

Ifseton,theuserwillberedirectedtoAdobesiteifFlashplayer8isnotinstalled.

detectFlashVersion

String-"true"/"false"

No

CheckstheFlashPlayerversionandifversionislessthan8andautoInstallRedirectissetonthenaskstheusertoinstallFlashPlayerfromAdobesite

renderer

flash/javascript

No

Therendererthatistobeusedtorenderthechart.

renderAt

String

No

Thenameofthecontainerinwhichthechartistoberendered.Usually,thetagrendersthechartinadivcalledchartIdDiv

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

还有另一个类似的自定义标签作为FusionCharts定制的JSP标签库，这是的renderHTML标签的一部分提供。

一小会儿后，我们将讨论renderHTML的标签。

JSPTagfiles

标记文件仅仅是一个纯文本文件，文件扩展名.tag。

除JSP页面指令以外，所有常用的JSP元素可以用来tag文件内。

tag文件可以用于在JSP模板。

我们已使用的3称为template1.tag，template2.tag和template3.tag我们的样品标记文件。

在DownloadPackage>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。

ChangingtheabovechartintoasinglepagechartusingDataStringmethod

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

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

1使用FC：

render标签

2。

为属性chartId,width,height,swfFilename设定适当值。

3当他们出色的标签体中的数据的一部分。

在这里，我们手动编码的数据。

在你的应用程序，你可以动态地构建了这个数据，通过查询数据库或外部的数据源。

在这个例子中，代替使用XMLURL属性，我们已经提供了数据作为FC身体的一部分：

渲染tag.When你看到这张图，你会得到相同的结果如上图所示。

（Inthisexample,insteadofusingthexmlUrlattribute,wehaveprovidedthedataaspartofthebodyofthefc:

rendertag.Whenyouseethischart,youwillgetthesameresultsasshownabove.）

UsingFusionChartsHTMLembeddingmethodtorenderchart

您还可以使用HTML嵌入的方法创建图表。

它创建HTML的