Grails组合FusionCharts Free制作统计图

Grails结合FusionCharts Free制作统计图

1.因为工程需要对数据进行统计并且用图的形式显示出来，所以用到了FusionCharts Free。

首先展示下效果图。

2.工欲善其事必先利其器，首先得下载FusionCharts Free，

?

http://www.fusioncharts.com/download/

上边这个网址可以下载到FusionCharts Free，但是得先注册下。ok，下载成功，将其解压

缩。解压后的文件目录如下：

3.将上边目录中的Charts拷贝到工程中的web-app目录下，同时将上边目录中的JSClass中的

拷贝到工程中的web-app目录下js文件夹中。ok，文件拷贝成功后，下边就是写代码了。

4.打开你需要编辑的gsp页面。在页面中加入如下代码：

<SCRIPT LANGUAGE="Javascript" SRC="${resource(dir:’js’,file:’FusionCharts.js’)}"></SCRIPT>

<%??
???? String strXML="";
????? strXML ="<graph caption=’下载统计’ bgcolor=’F5FFFA’ subCaption=’By ${session.user.username}’ decimalPrecision=’0′ showNames=’1′ baseFontSize=’19′ numberSuffix=’本’ pieSliceDepth=’30′ formatNumberScale=’0′>"???
???
??? strXML +="<set name=’已下载’ value=’${params.loadnum}‘/>";
??? strXML +="<set name=’未下载’ value=’${params.unloadnum}‘/>";
??? strXML += "</graph>";
??? %>

??????????? <div id=’Div’ align=’center’>下载统计</div>
??????????? <script type="text/javascript">
??????????? var chart_sum = new FusionCharts("${resource(dir:’Charts’,file:’FCF_Pie3D.swf’)}", "sum", "600", "300", "false", "false");
??????????? chart_sum.setDataXML("<%= strXML%>");
??????????? chart_sum.render("Div");
??????????? </script>

?

保存代码，运行程序，会出现上边的饼图。

5.上边只是简单显示了了一个3D饼图，下边介绍下它的属性。

<graph>

(1)Background

bgColor="HexColorCode"：顾名思义，它就是背景色，例如bgcolor=’F5FFFA’ ，记住不

需要在这个16进制字符前边加#.

bgAlpha="NumericalValue(0-100)"：设置这个图的alpha。

bgSWF="Path of SWF File"：你可以利用这个属性引用一个外部的.swf文件作为这个图的背

景。

(2)Chart and Axis Titles

caption="String"：图的标题

subCaption="String" ：图的副标题

(3)Generic Properties

shownames="1/0"：1表示显示这个值的名字，0不显示，默认是1

showValues="1/0"：1表示显示这个值，0不显示，默认是1

showPercentageValues="1/0"：1表示显示百分比，0显示实际值，默认值是0

showPercentageInLabel ="1/0"：0表示显示实际数值，1显示百分比，默认值是0

(3)Pie Properties

pieRadius="Numeric Pixels"：设置饼图的半径，如果没有设置，FusionCharts会自动计算

出最佳的半径。

pieSliceDepth="Numeric Value"：设置这个3D图形的高度。

(4)Font Properties

baseFont="FontName"：字体样式

baseFontSize="FontSize"：字体大小

baseFontColor="HexColorCode"：字体大小

(5)Number Formatting Options

numberPrefix="$"：数字前缀

numberSuffix="p.a"：数字后缀

formatNumber="1/0"：如果为1，那么40,000；如果为0，那么40000。

formatNumberScale="1/0"：是否要在数字后面加K或者M,例如10434，如果设置为1，那

么就是1.04K，

decimalSeparator="."：小数点分隔符

thousandSeparator=","：千位分隔符

decimalPrecision="2"：小数精度

(6)Hover Caption Properties

showhovercap="1/0"：当鼠标停留在图上时是否显示提示框，1显示，0不显示，默认显

示，

hoverCapBgColor="HexColorCode"：提示框的颜色

hoverCapBorderColor="HexColorCode"：提示框边框颜色

hoverCapSepChar="Char"：提示框中名字与值之间的分隔符

<set> 是<graph>的子属性

一个简单的例子如下：

<set name="Jan" value="54" color="3300FF" hoverText="January" link="ShowDetails.asp%3FMonth=Jan" showName="1"/>

name="string"：在饼图上显示的文字

value="NumericalValue"：在饼图上显示的数值

color="HexCode"：该数值所对应的颜色

hoverText="String value"：当鼠标停留在该数值区域时显示的文本

link="URL"：当点击该区域时，链接到的地址

ok,上边是3D饼图的一些属性，其他图的属性可以参考你下载的文档，打开解压后的文件，

打开红色框选择的文件，里边会有关于各种图的使用事例还有一些图的属性介绍。