使用XML/SWF charts 报表——解决“多层圆环图“的需求-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_171/article/details/82307152

本文介绍如何使用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

2、charts_library

3、AC_RunActiveContent.js

4、sample.html

5、sample.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、调用struts2的action的haha方法

在上面代码中可以发现，我们的xml_source对action同样有效。。（这方面参考官网：“ XML Source “）

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

5、action中的haha方法

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

下面这个是“多层圆环图“的xml数据。具体的细节，参考官网。

<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>