报表使用经验、技巧大总结

Posted on 2007-07-30 10:37 i have only belief 阅读(528) 评论(0)  编辑 收藏 引用 所属分类: JAVA(JSP)

一、        利用基本的TABLE元素


本来页面上是用jfreechart 绘制的数据分析图。但是由于有个页面绘制的图比较多，而且是js选择性的展示哪张图，头说都用jfreechart效率太慢了，把那简单的柱状图，拿去改改（用简单点，而且不怎么占资源的方式）。我反复思量，反复研究，终于搞出个小东西。虽然没有什么技术含量，但是却觉得自己很有创意。全部都是用最简单的HTML 元素制作的，分享下：
1.效果截图

2.简单的代码：

  1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2<html>
  3<head>
  4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5<title>Test</title>
  6</head>
  7
  8<body>
  9<table border=0 cellpadding=0 cellspacing=0>
 10<tr>
 11<td width=1 height=200 bgcolor=red></td>
 12<td width=250><table width="245" border="0" cellspacing="0" align="right"  >
 13  <tr> 
 14    <td width="15" nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 15    <td width="42">&nbsp;</td>
 16    <td width="16">&nbsp;</td>
 17    <td width="41">&nbsp;</td>
 18    <td width="17">&nbsp;</td>
 19    <td width="42">&nbsp;</td>
 20    <td width="17">&nbsp;</td>
 21    <td width="39">&nbsp;</td>
 22  </tr>
 23  <tr> 
 24    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 25    <td>&nbsp;</td>
 26    <td>&nbsp;</td>
 27    <td>&nbsp;</td>
 28    <td bgcolor="#33CCFF">&nbsp;</td>
 29    <td>&nbsp;</td>
 30    <td>&nbsp;</td>
 31    <td>&nbsp;</td>
 32  </tr>
 33  <tr> 
 34    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 35    <td>&nbsp;</td>
 36    <td>&nbsp;</td>
 37    <td>&nbsp;</td>
 38    <td bgcolor="#33CCFF">&nbsp;</td>
 39    <td>&nbsp;</td>
 40    <td>&nbsp;</td>
 41    <td>&nbsp;</td>
 42  </tr>
 43  <tr> 
 44    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 45    <td>&nbsp;</td>
 46    <td bgcolor="#000000">&nbsp;</td>
 47    <td>&nbsp;</td>
 48    <td bgcolor="#33CCFF">&nbsp;</td>
 49    <td>&nbsp;</td>
 50    <td>&nbsp;</td>
 51    <td>&nbsp;</td>
 52  </tr>
 53  <tr> 
 54    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 55    <td>&nbsp;</td>
 56    <td bgcolor="#000000">&nbsp;</td>
 57    <td>&nbsp;</td>
 58    <td bgcolor="#33CCFF">&nbsp;</td>
 59    <td>&nbsp;</td>
 60    <td bgcolor="#FF9933">&nbsp;</td>
 61    <td>&nbsp;</td>
 62  </tr>
 63  <tr> 
 64    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 65    <td>&nbsp;</td>
 66    <td bgcolor="#000000">&nbsp;</td>
 67    <td>&nbsp;</td>
 68    <td bgcolor="#33CCFF">&nbsp;</td>
 69    <td>&nbsp;</td>
 70    <td bgcolor="#FF9933">&nbsp;</td>
 71    <td>&nbsp;</td>
 72  </tr>
 73  <tr> 
 74    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 75    <td>&nbsp;</td>
 76    <td bgcolor="#000000">&nbsp;</td>
 77    <td>&nbsp;</td>
 78    <td bgcolor="#33CCFF">&nbsp;</td>
 79    <td>&nbsp;</td>
 80    <td bgcolor="#FF9933">&nbsp;</td>
 81    <td>&nbsp;</td>
 82  </tr>
 83  <tr> 
 84    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 85    <td>&nbsp;</td>
 86    <td bgcolor="#000000">&nbsp;</td>
 87    <td>&nbsp;</td>
 88    <td bgcolor="#33CCFF">&nbsp;</td>
 89    <td>&nbsp;</td>
 90    <td bgcolor="#FF9933">&nbsp;</td>
 91    <td>&nbsp;</td>
 92  </tr>
 93</table></td>
 94</tr>
 95<tr><td colspan=2 height=1 bgcolor=red></td><tr>
 96<table>  
 97</body>
 98</html>
 99
100


如果只是需要在页面上现实一些柱状图，那么这种方式是非常简单和实用的。核心原理利用HTML的基本元素——table。绘制table，不显示其边框，不显示其间距，然后利用获得的数据，使用JS控制哪行哪列用什么颜色。

如：

document.getElementById('tab').rows[0].cells[0].bgColor = 'red';

二、立体感的柱状图

——这是在网上陶下来的漂亮代码

  1<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  2
  3<!--[if !mso]>
  4
  5<style>
  6
  7v\:*         { behavior: url(#default#VML) }
  8
  9o\:*         { behavior: url(#default#VML) }
 10
 11.shape       { behavior: url(#default#VML) }
 12
 13</style>
 14
 15<![endif]-->
 16
 17<HEAD>
 18
 19<TITLE>柱状图形报表样列</TITLE>
 20
 21<SCRIPT LANGUAGE="JavaScript">
 22
 23//addPole 增加一个柱状图
 24
 25//left 与窗口左边的距离
 26
 27//width  宽度
 28
 29//height 高度
 30
 31//zindex 层高度
 32
 33//fillcolor 主色
 34
 35//color 渐变色
 36
 37//type 默认为竖,1为横
 38
 39function addPole(left,top,width,height,zindex,fillcolor,color,type){
 40
 41   top=top-height;
 42
 43   var a="";
 44
 45   if(type==1){
 46
 47      a="angle='-90' focus='100%'";
 48
 49   }
 50
 51   var html="<v:rect style='position:absolute;";
 52
 53   html=html+"left:"+left+"px;";
 54
 55   html=html+"top:"+top+"px;";
 56
 57   html=html+"width:"+width+"px;";
 58
 59   html=html+"height:"+height+"px;";
 60
 61   html=html+"z-index:"+zindex+"'";
 62
 63   html=html+"fillcolor='"+fillcolor+"'>";
 64
 65   html=html+"<v:fill color2='"+color+"'";
 66
 67   html=html+" rotate='t' "+a+"  type='gradient'/><o:extrusion v:ext='view' backdepth='20pt' ";
 68
 69   html=html+"color='"+fillcolor+"' on='t'/></v:rect>";
 70
 71   document.write(html);
 72
 73}
 74
 75 
 76
 77//left 与窗口左边的距离
 78
 79//width  宽度
 80
 81//height 高度
 82
 83//zindex 立体高度
 84
 85//fillcolor 主色
 86
 87function addBackground(left,top,width,height,zindex,fillcolor){
 88
 89   top=top-height;
 90
 91   var html="<v:rect style='position:absolute;left:"+left+"px;";
 92
 93   html=html+"top:"+top+"px;";
 94
 95   html=html+"width:"+width+"px;";
 96
 97   html=html+"height:"+height+"px;";
 98
 99   html=html+"z-index:"+zindex+"'";
100
101   html=html+"fillcolor='"+fillcolor+"'";
102
103   html=html+" stroked='f'><v:fill rotate='t' angle='-45' focus='100%' type='gradient'/></v:rect>";
104
105   document.write(html);
106
107}
108
109 
110
111function addLine(zindex,from,to,color){
112
113       var html="<v:line style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:"+zindex+"'";
114
115       html=html+" from='"+from+"' to='"+to+"' strokecolor='"+color+"'/>"
116
117       document.write(html);
118
119}
120
121 
122
123function addText(left,top,width,height,zindex,value,fontsize){
124
125       top=top-height;
126
127   var html="<v:shape style='position:absolute;left:"+left+"px;";
128
129   html=html+"top:"+top+"px;";
130
131   html=html+"width:"+width+"px;";
132
133   html=html+"height:"+height+"px;";
134
135   html=html+"z-index:"+zindex+"'>";
136
137   html=html+"<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td";
138
139   html=html+" style='FONT-SIZE:"+fontsize+"' align='center'>"+value+"</td></tr></table></v:textbox></v:shape>";
140
141   document.write(html);
142
143}
144
145 
146
147function addGround(left,top,width,height,zindex,fillcolor,linecolor1,linecolor2,offset,level,min,leftoffset,textwidth,textheight,fontsize){
148
149   addBackground(left,top,width,height,zindex,fillcolor);
150
151   addLine(zindex,left+"px,"+top+"px",((left-0)+(width-0))+"px,"+top+"px",linecolor1);
152
153   addLine(zindex,left+"px,"+top+"px",left+"px,"+(top-height)+"px",linecolor1);
154
155   addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset)+"px",((left-0)+(width-0))+"px,"+(top-offset)+"px",linecolor2);
156
157   addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset)+"px",((left-0)+(offset-0))+"px,"+(top-height)+"px",linecolor2);
158
159   addLine(zindex,left+"px,"+(top-offset)+"px",((left-0)+(offset-0))+"px,"+top+"px",linecolor2);
160
161   for(var i=1;i<level;i++){
162
163      addLine(zindex,left+"px,"+(top-offset-(height*i)/level)+"px",((left-0)+(offset-0))+"px,"+(top-(height*i)/level)+"px",linecolor2);
164
165         addLine(zindex,(left-leftoffset)+"px,"+(top-(height*i)/level)+"px",left+"px,"+(top-(height*i)/level)+"px",linecolor1);
166
167      addText(left-textwidth,(top-(height*i)/level)+(textheight-0)+2,textwidth,textheight,"-1",i*min,fontsize)
168
169         addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset-(height*i)/level)+"px",((left-0)+(width-0))+"px,"+(top-offset-(height*i)/level)+"px",linecolor2);
170
171   }
172
173   addLine(zindex,(left-leftoffset)+"px,"+(top-(height*level)/level)+"px",left+"px,"+(top-(height*level)/level)+"px",linecolor1);
174
175   addText(left-textwidth,(top-(height*level)/level)+(textheight-0)+2,textwidth,textheight,"-1",level*min,fontsize)
176
177}
178
179 
180
181function addEPole(left,top,width,height,zindex,fillcolor,color,textwidth,textheight,value1,value2,fontsize){
182
183       addText(left-textwidth/2+width/2,top-height-10,textwidth,textheight,zindex,value1,fontsize);
184
185       addText(left-textwidth/2+width/2,(top-0)+(textheight-0),textwidth,textheight,zindex,value2,fontsize);
186
187       addPole(left,top,width,height,zindex,fillcolor,color)
188
189}
190
191</SCRIPT>
192
193</HEAD>
194
195 
196
197<BODY>
198
199<div>
200
201<SCRIPT LANGUAGE="JavaScript">
202
203<!--
204
205 
206
207addEPole("180","400","30","150","1","#3300FF","#66FFFF","80","18","300","1月份","9pt");
208
209addEPole("230","400","30","300","1","#FF0000","#99FFFF","80","18","600","2月份","9pt");
210
211addEPole("280","400","30","200","1","#33CC00","#99FFFF","80","18","400","3月份","9pt");
212
213addEPole("330","400","30","100","1","#FF0099","#99FFFF","80","18","200","4月份","9pt");
214
215addEPole("380","400","30","50","1","#660000","#99FFFF","80","18","100","5月份","9pt");
216
217addEPole("430","400","30","20","1","#FFFF00","#99FFFF","80","18","40","6月份","9pt");
218
219addEPole("480","400","30","180","1","#330066","#99FFFF","80","18","360","7月份","9pt");
220
221addEPole("530","400","30","120","1","#CC6633","#99FFFF","80","18","240","8月份","9pt");
222
223addEPole("580","400","30","80","1","#9933FF","#99FFFF","80","18","160","9月份","9pt");
224
225addGround("160","400","460","300","-1","#33CCFF","#000000","#6699CC","10","6","100","20","40","18","9pt")
226
227//-->
228
229</SCRIPT>
230
231</div>
232
233</body>
234
235</html>
236

 

 

效果图如下：

是不是很漂亮呢？我是觉得很漂亮。

其中方法调用，想知道每个参数的详细信息，你可以自己试：

addEPole("580","400","30","80","1","#9933FF","#99FFFF","80","18","160","9月份","9pt");

参数含义包括上边距离，左边距，以及高宽，以及XY上的内容 。以及颜色，柱体的宽度等等信息。

addGround("160","400","460","300","-1","#33CCFF","#000000","#6699CC","10","6","100","20","40","18","9pt")

定义了范围大小以及6个刻度，每个100，还包括字体大小，刻度线颜色，以及内部线条颜色，以及渐变色等等含义。

 

三、JFreechart使用

 

注意生成图都自动存在临时文件夹里的。

 

总结过上手资料文章：

http://www.blogjava.net/JAVA-HE/archive/2007/04/18/111439.html

但是朋友反映总结得过于粗浅。

 

这里写详细点：

1.       柱状图

 1DefaultCategoryDataset dataset = new DefaultCategoryDataset ();
 2
 3    dataset.addValue (300, "广州", "苹果");
 4
 5    dataset.addValue (200, "广州", "梨子");
 6
 7    dataset.addValue (600, "广州", "葡萄");
 8
 9    dataset.addValue (340, "广州", "芒果");
10
11    dataset.addValue (280, "广州", "荔枝");
12
13    JFreeChart chart = ChartFactory.createBarChart3D ("水果销量统计图","水果","销量",
14
15            dataset,PlotOrientation.VERTICAL, //选择水平或者垂直放
16
17            false,//是否显示颜色类别（地区）提示
18
19            false,
20
21            false);
22
23    String filename = ServletUtilities.saveChartAsPNG (chart, 500, 300, null, session);
24
25    String graphURL = request.getContextPath () + "/servlet/DisplayChart?filename=" + filename;
26
27

 

2.       饼图

 

 1DefaultPieDataset data = new DefaultPieDataset();
 2
 3    data.setValue("六月", 500);
 4
 5    data.setValue("七月", 580);
 6
 7    data.setValue("八月", 828);
 8
 9    PiePlot plot = new PiePlot(data);
10
11    JFreeChart chart = new JFreeChart("", JFreeChart.DEFAULT_TITLE_FONT, plot, true);
12
13    chart.setBackgroundPaint(java.awt.Color.white);  //可选，设置图片背景色
14
15    chart.setTitle("Welcome to Jfreechart !"); //可选，设置图片标题
16
17    ChartRenderingInfo info = new ChartRenderingInfo(new StandardEntityCollection());
18
19    //500是图片长度，300是图片高度
20
21    String filename = ServletUtilities.saveChartAsPNG(chart, 500, 300, info, session);
22
23String graphURL = request.getContextPath() + "/servlet/DisplayChart?filename=" + filename;
24
25 
26
27在插入图片的地方：
28
29<img src="<%= graphURL %>" width=500 height=300 border=0 usemap="#<%= filename %>">
30
31 
32
33在xml中加入了：
34
35<servlet>
36
37               <servlet-name>DisplayChart</servlet-name>
38
39               <servlet-class>org.jfree.chart.servlet.DisplayChart</servlet-class>
40
41    </servlet>
42
43    <servlet-mapping>
44
45               <servlet-name>DisplayChart</servlet-name>
46
47               <url-pattern>/servlet/DisplayChart</url-pattern>
48
49    </servlet-mapping>
50
51图片效果，请访问：http://www.blogjava.net/JAVA-HE/archive/2007/04/18/111439.html
52
53还可以如下创建 dataset对象：
54
55double[][] data = new double[][] {{672, 766, 223, 540, 126}, {325, 521, 210, 340, 106}, {332, 256, 523, 240, 526} };
56
57   String[] rowKeys = {"苹果","梨子","葡萄"};
58
59   String[] columnKeys = {"北京","上海","广州","成都","深圳"};
60
61CategoryDataset dataset = DatasetUtilities.createCategoryDataset(rowKeys, columnKeys, data);
62
63

效果：

 

参照网上介绍的一些文章总是发现不能向我的这么顺利，不是说他们的有错。我想版本不一样了 。区别肯定是有的。

实际上建立什么样的图表，ChartFactory可以选择不同方法建立不同图表的。

比如直接讲原来一个柱状图，中改了一个方法，图就变了。

如：

 

 1JFreeChart chart = ChartFactory.createLineChart ("水果销量统计图","水果","销量",
 2
 3            dataset,PlotOrientation.VERTICAL,//选择水平或者垂直放
 4
 5            true,//广州或者成都，这里颜色有区别的。（颜色类别）
 6
 7            true,
 8
 9            true);
10
11

对比两幅图。只是方法名字不同。

 

再来个3D的:（createLineChart3D方法）

而作为createAreaChart建立的面积比例图：

需要注意点的是，数据先后对图像效果是有影响的。因为有覆盖存在。

 

补充一个让大家都晕的，我居然一直一位JFreechart 和CEWOLG是一个东西。所以总在那里找标签。还以为我下载的版本不同，所以那些东西都找不到呢！

 

四、结合cewolf使用 

 

实际上大量应用的是线图：

经典应用，无非是读取数据库，然后根据数据库中的值来生成线图。

 

生成线图的JSP：

  1
  2
  3<%@page pageEncoding="UTF-8"%>
  4
  5<%@page import="java.sql.*"%>
  6
  7<%@page import="java.util.*"%>
  8
  9<%@page import="de.laures.cewolf.*"%>
 10
 11<%@page import="de.laures.cewolf.tooltips.*"%>
 12
 13<%@page import="de.laures.cewolf.links.*"%>
 14
 15<%@page import="org.jfree.data.*"%>
 16
 17<%@page import="org.jfree.data.time.*"%>
 18
 19<%@page import="org.jfree.data.gantt.*"%>
 20
 21<%@page import="org.jfree.chart.*"%>
 22
 23<%@page import="org.jfree.chart.plot.*"%>
 24
 25<%@page import="org.jfree.data.category.*"%>
 26
 27<%@page import="org.jfree.data.general.*"%>
 28
 29<%@page import="org.jfree.data.xy.*"%>
 30
 31<%@page import="java.awt.*" %>
 32
 33<%@page import="de.laures.cewolf.taglib.CewolfChartFactory" %>
 34
 35<%@page import="org.jfree.chart.event.ChartProgressListener" %>
 36
 37<%@page import="org.jfree.chart.event.ChartProgressEvent" %>
 38
 39<%@page import="com.palmtech.util.*" %>
 40
 41<%@page import="com.palmtech.sqldata.*" %>
 42
 43<%
 44
 45final int round=roleInfo.round;//获取游戏轮数
 46
 47int[][] loanDataTemp=new int[round][2];