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页面。在页面中加入如下代码:

<%  
     String strXML="";
      strXML =""   
   
    strXML +="${params.loadnum} ‘/>";
    strXML +="${params.unloadnum} ‘/>";
    strXML += "
";
    %>

           

下载统计

           

 

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

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

(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":提示框中名字与值之间的分隔符

的子属性

一个简单的例子如下:

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

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

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

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

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

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

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

... other posts by 姜立

你可能感兴趣的:(Ajax)