使用XML/SWF charts 报表——解决“多层圆环图“的需求

本文介绍如何使用XML/SWFcharts创建动态报表,包括设置步骤、整合Struts2框架及配置示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


粗糙使用XML/SWF charts进行报表

1、使用XML/SWF Charts

A)官方地址http://www.maani.us/xml_charts/index.php

B)学习材料:官方网站里面很详细,在左侧导航中“Reference”。

C)使用方式

       1、在“Download”目录下面下载最新版本:Download - XML/SWF Charts 5.120

       2、解压开来,拿出来这些文件,并把文件放置到项目对应文件夹中res/js res/swf
                     1
charts.swf

              2charts_library

              3AC_RunActiveContent.js

                    4sample.html

                    5sample.xml

            3、将sample.html改成我们想要的名称,比如a.jsp(请注意划线部分)

<HTML>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script language="javascript"> DetectFlashVer = 0; </script>
<script src="../res/js/AC_RunActiveContent.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
var requiredMajorVersion = 10;
var requiredMinorVersion = 0;
var requiredRevision = 45;
-->
</script>
<head>
	<style type="text/css">
		.div1 {
			background-color: #000000;
			filter: alpha(opacity=10);
			-moz-opacity: 0.1;
			opacity: 0.1;
			width: 1000px;
			height: 400px;
			position: absolute;
			left: 30px;
			top: 20px;
			z-index: 2;
		}
		.div2 {
			position: absolute;
			left: 30px;
			top: 20px;
			z-index: 1;
		}
	</style>
</head>
<BODY>

<div class="div1">

</div>
<div class="div2">
<script language="JavaScript" type="text/javascript">
<!--
if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
	alert("This page requires AC_RunActiveContent.js");
} else {
	var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
	if(hasRightVersion) { 
		AC_FL_RunContent(
			'codebase', '',
			'width', '400',
			'height', '250',
			'scale', 'noscale',
			'salign', 'TL',
			'bgcolor', '#777788',
			'wmode', 'opaque',
			'movie', '../res/swf/charts',
			'src', '../res/swf/charts',
			'FlashVars', 'library_path=../res/swf/charts_library&xml_source=../project/milepost!haha.action', 
			'id', 'my_chart',
			'name', 'my_chart',
			'menu', 'true',
			'allowFullScreen', 'true',
			'allowScriptAccess','always',
			'quality', 'high',
			'align', 'middle',
			'pluginspage', '',
			'play', 'true',
			'devicefont', 'false'
			); 
	} else { 
		var alternateContent = 'This content requires the Adobe Flash Player. '
		+ '<u>Get Flash</u>.';
		document.write(alternateContent); 
	}
}
// -->
</script>
<noscript>
	<P>This content requires JavaScript.</P>
</noscript>
</div>
</BODY>
</HTML>

 注意:跟我们的例子不同的地方有红色部分和深蓝色部分。红色部分是路径的修改,深蓝色部分是解决点击flash会连接到官网的一个办法。该办法即:层的覆盖。(这个是免费版的问题,除非破解,或者购买)

 

      

       4、调用struts2actionhaha方法

              在上面代码中可以发现,我们的xml_sourceaction同样有效。。(这方面参考官网:“ XML Source “)

'FlashVars', 'library_path=../res/swf/charts_library&xml_source=../project/milepost!haha.action', 

         5action中的haha方法

              这里的action方法,就是我们平常的struts2的一个方法,此方法返回到一个sample.jsp页面。其实返回的应该是xml格式的jsp。内容即官网例子中的sample.xml

下面这个是“多层圆环图“的xml数据。具体的细节,参考官网。
<!--[if !supportLineBreakNewLine]-->

<chart>

	<chart_data>
		<row>
			<null/>
			<string></string>
			<string></string>
			<string></string>
			<string></string>
			<string></string>
			<string></string>
		</row>
		<row>
			<string>2007</string>
			<number tooltip='region A' line_color='eeffee' line_thickness='2' line_alpha='50'>75</number>
			<number tooltip='region B' line_color='eeffee' line_thickness='2' line_alpha='50'>25</number>
			<number tooltip='region C' line_color='eeffee' line_thickness='2' line_alpha='50'>10</number>
			<null/>
			<null/>
			<null/>
		</row>
		<row>
			<string>2008</string>
			<number tooltip='region A' line_color='eeffee' line_thickness='2' line_alpha='50'>35</number>
			<number tooltip='region B' line_color='eeffee' line_thickness='2' line_alpha='50'>10</number>
			<number tooltip='region C' line_color='eeffee' line_thickness='2' line_alpha='50'>20</number>
			<null/>
			<null/>
			<null/>
		</row>
		<row>
			<string>2009</string>
			<number tooltip='region A' line_color='eeffee' line_thickness='2' line_alpha='50'>10</number>
			<number tooltip='region B' line_color='eeffee' line_thickness='2' line_alpha='50'>25</number>
			<number tooltip='region C' line_color='eeffee' line_thickness='2' line_alpha='50'>10</number>
			<number tooltip='region D' line_color='eeffee' line_thickness='2' line_alpha='50'>10</number>
			<number tooltip='region E' line_color='eeffee' line_thickness='2' line_alpha='50'>10</number>
			<number tooltip='region F' line_color='eeffee' line_thickness='2' line_alpha='50'>10</number>
		</row>
	</chart_data>
	<chart_label shadow='low' color='000000' alpha='75' size='9' position='inside' as_percentage='true' />
	<chart_pref bevel='bg' select='true' empty_center='true' />
	<chart_type>donut</chart_type>

	<draw>
		<circle layer='background' x='250' y='157' radius='112' fill_color='eeffee' fill_alpha='100' line_thickness='0' bevel='bg' />
		<circle layer='background' x='250' y='157' radius='24' fill_color='eeffee' fill_alpha='100' line_thickness='0' shadow='inner' />
		<text shadow='high' x='-20' y='295' width='400' size='100' color='0' rotation='-90' alpha='5'>donut</text>	
	</draw>
	<filter>
		<shadow id='low' distance='2' angle='45' color='0' alpha='20' blurX='5' blurY='5' />
		<shadow id='high' distance='5' angle='90' color='0' alpha='50' blurX='10' blurY='10' />
		<shadow id='inner' distance='5' angle='45' color='0' alpha='30' blurX='10' blurY='10' inner='true' />
		<bevel id='bg' angle='45' blurX='35' blurY='35' distance='10' highlightColor='eeeeff' highlightAlpha='100' shadowColor='0' shadowAlpha='15' type='full' />
	</filter>
	
	<legend shadow='low' transition='dissolve' x='360' width='50' height='60' bevel='low' fill_alpha='0' line_alpha='0' bullet='line' size='12' alpha='75' />
	<tooltip color='000000' alpha='75' size='12' background_color_1='ffffff' background_color_2='ddeedd' background_alpha='85' shadow='low' />

</chart>
  <!--[endif]-->

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值