open flash chart教程Word下载.docx

上传人:b****6 文档编号:21049724 上传时间:2023-01-27 格式:DOCX 页数:26 大小:783.98KB
下载 相关 举报
open flash chart教程Word下载.docx_第1页
第1页 / 共26页
open flash chart教程Word下载.docx_第2页
第2页 / 共26页
open flash chart教程Word下载.docx_第3页
第3页 / 共26页
open flash chart教程Word下载.docx_第4页
第4页 / 共26页
open flash chart教程Word下载.docx_第5页
第5页 / 共26页
点击查看更多>>
下载资源
资源描述

open flash chart教程Word下载.docx

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

open flash chart教程Word下载.docx

%>

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

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > PPT模板 > 其它模板

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1