粗糙使用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数据。具体的细节,参考官网。
<!--[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]-->