open flash chart教程Word下载.docx

open flash chart教程Word下载.docx

《open flash chart教程Word下载.docx》由会员分享，可在线阅读，更多相关《open flash chart教程Word下载.docx（26页珍藏版）》请在冰豆网上搜索。

%>

html>

head>

scripttype="

text/javascript"

src="

js/swfobject.js"

>

/script>

js/json2.js"

swfobject.embedSWF（

"

open-flash-chart.swf"

展现效果用的flash注意文件的相对位置

my_chart"

页面中放置图形的位置

40%"

高度可以自己定也可以走比例

宽度

9.0.0"

flash的版本

expressInstall.swf"

flashplayer检查程序，作用是如果没有浏览器flash插件，则提示安装

{"

data-file"

:

%=request.getContextPath（）%>

/testAction.do"

},

json结果集的请求URL通过AJAX请求返回结果集

{wmode:

transparent"

}）;

设置flash背景透明

/head>

body>

p>

HelloWorld<

/p>

divid="

/div>

/body>

/html>

解释：

使用openflashchart2要引入两个js文件swfobject.js和json2.js以及一个flash文件open-flash-chart.swf。

js文件用来解析代码生成的json格式字符串，提供给open-flash-chart.swf让他来进行展示。

其中<

/testAction.do就是指定的我们的Action的路径。

二.StrutsAction:

以下代码是Struts1Action中的execute的写法

1）PieChart饼图:

publicActionForwardexecute（ActionMappingmapping,ActionFormform,

HttpServletRequestrequest,HttpServletResponseresponse）{

//TODOAuto-generatedmethodstub

try{

PieChart 

pie= 

new 

PieChart（）;

pie.setFontSize（15）;

//设置字体

pie.addSlice（200000000,"

实收费用"

）;

//分类

pie.addSlice（60000000,"

欠费金额"

pie.addSlice（30000000,"

报停金额"

pie.addSlice（20000000,"

减免金额"

pie.setStartAngle（100）;

//设置角度

pie.setAnimate（true）;

//设置颜色

pie.setColours（newString[]{"

0x336699"

"

0x88AACC"

0x999933"

0x666699"

0xCC9933"

0x006666"

0x3399FF"

0x993300"

0xAAAA77"

0x666666"

0xFFCC66"

0x6699CC"

0x663366"

0x9999CC"

0xAAAAAA"

0x669999"

0xBBBB55"

0xCC6600"

0x9999FF"

0x0066CC"

0x99CCCC"

0x999999"

0xFFCC00"

0x009999"

0x99CC33"

0xFF9900"

0x999966"

0x66CCCC"

0x339966"

0xCCCC33"

}）;

pie.setTooltip（"

#val# 

/ 

#total#<

br>

占百分之#percent#"

）;

//鼠标移动上去后提示内容

pie.setRadius（20）;

ChartflashChart=newChart（"

2009至2010年度包烧费分析"

font-size:

30px;

color:

#ff0000;

//整个图的标题

//flashChart.setBackgroundColour（"

#3EFFFF"

flashChart.addElements（pie）;

//把饼图加入到图表 

Stringjson=flashChart.toString（）;

//转成json格式

response.setContentType（"

application/json-rpc;

charset=utf-8"

response.setHeader（"

Cache-Control"

no-cache"

Expires"

0"

Pragma"

No-cache"

response.getWriter（）.print（json）;

//写到客户端

}catch（Exceptionex）{

ex.printStackTrace（）;

}

returnnull;

显示效果如下：

2）BarChart柱状图:

BarChartchart=newBarChart（BarChart.Style.GLASS）;

//设置条状图样式

//FilledBarChartchart=newFilledBarChart（"

red"

"

blue"

//设置条状图样式

//StringsMax="

10000"

;

longmax=900;

////Y轴最大值

Map<

String,Long>

map=newHashMap<

（）;

map.put（"

5"

newLong（50））;

6"

newLong（45））;

7"

newLong（60））;

8"

newLong（30））;

9"

newLong（80））;

10"

newLong（500））;

11"

newLong（800））;

12"

newLong（200））;

XAxisx=newXAxis（）;

//X轴

inti=5;

for（Stringkey:

map.keySet（））{

x.addLabels（i+"

月份"

//x轴的文字

Barbar=newBar（map.get（"

+i）,"

万元"

i++;

bar.setColour（"

//颜色

bar.setTooltip（map.get（"

+i）+"

//鼠标移动上去后的提示

chart.addBars（bar）;

//条标题，显示在x轴上

ChartflashChart=newChart（）;

flashChart.addElements（chart）;

//把柱图加入到图表 

YAxisy=newYAxis（）;

//y轴 

y.setMax（max+10.0）;

//y轴最大值 

y.setSteps（max/10*1.0）;

//步进 

flashChart.setYAxis（y）;

flashChart.setXAxis（x）;

2）LineChart折线图:

LineChartlineChart=newLineChart（）;

lineChart.setFontSize（15）;

lineChart.setTooltip（"

#val#%"

//设置鼠标移到点上显示的内容

LineChart.Dotdot1=newLineChart.Dot（70）;

//按照顺序设置各个点的值

LineChart.Dotdot2=newLineChart.Dot（85）;

LineChart.Dotdot3=newLineChart.Dot（44）;

LineChart.Dotdot4=newLineChart.Dot（67）;

LineChart.Dotdot5=newLineChart.Dot（90）;

LineChart.Dotdot6=newLineChart.Dot（64）;

LineChart.Dotdot7=newLineChart.Dot（28）;

LineChart.Dotdot8=newLineChart.Dot（99）;

lineChart.addDots（dot1）;

//按照顺序把点加入到图形中

lineChart.addDots（dot2）;

lineChart.addDots（dot3）;

lineChart.addDots（dot4）;

lineChart.addDots（dot5）;

lineChart.addDots（dot6）;

lineChart.addDots（dot7）;

lineChart.addDots（dot8）;

x.addLabels（"

5月份"

6月份"

7月份"

8月份"

9月份"

10月份"

11月份"

12月份"

//x.setColour（"

0x000000"

longmax=100;

y.setMax（max+0.0）;

y.setSteps（10）;

历年收费率报表"

12px;

//整个图的标题 

flashChart.addElements（lineChart）;

TextyText=newText（"

历年缴费率曲线图"

Text.createStyle（20,"

#736AFF"

Text.TEXT_ALIGN_CENTER））;

flashChart.setYLegend（yText）;

//设置y轴显示内容

4）BarChart2组合柱状图:

StackedBarChartchart=newStackedBarChart（）;

//设置组合柱状图

x.set3D（0）;

x.setColour（"

#909090"

x.setGridColour（"

#ADB5C7"

StackedBarChart.Stackstack=newStackedBarChart.Stack（）;

//新建柱组

StackedBarChart.StackValuestackValue=newStackedBarChart.StackValue（map.get（"

+i）,"

//每组柱状图每个柱的设置

StackedBarChart.StackValuestackValue2=newStackedBarChart.StackValue（i*5+10,"

#3334AD"

StackedBarChart.StackValuestackValue3=newStackedBarChart.StackValue（i*10+20,"

#D54C78"

stack.addStackValues（stackValue）;

stack.addStackValues（stackValue2）;

stack.addStackValues（stackValue3）;

chart.addStack（stack）;

StackedBarChart.Keykey1=newStackedBarChart.Key（"

包烧费"

10）;

StackedBarChart.Keykey2=newStackedBarChart.Key（"

热表收费"

StackedBarChart.Keykey3=newStackedBarChart.Key（"

生活热水收费"

chart.addKeys（key1）;

chart.addKeys（key2）;

chart.addKeys（key3）;

ChartflashChart=newChart（"

组合柱状图"

{font-size:

20px;

color:

#FFFFFF;

margin:

5px;

background-color:

#505050;

padding:

5px;

padding-left:

20px;

padding-right:

}"

y.set3D（0）;

y.setColour（"

y.setGridColour（"

Texttext=newText（"

OpenFlashChart3DBar"

text.setStyle（Text.createStyle（15,"

Text.TEXT_ALIGN_RIGHT））;

flashChart.setYLegend（text）;

//设置Y轴左侧的文字

显示效果如下图

Charts

ChartSize

创建flashobject时指定chart的大小，下面代码指定宽为550，高為200，

swfobject.embedSWF（"

"

550"

200"

{"

datafile/bar.aspx"

<

/script