如何在web端 显示柱状、曲线图？

Question

1. 用jfreechat
2. 用一些报表工具，如如意，水晶等

Answer 1

感谢大家的指点。
？？？（有点晕）
我的需求是从数据库取出一些数据，分析后显示柱状图、曲线图报表，然后打印。jfreechart和jfreereport不同？（不好意思，确实有点晕）如果我用jfreechart生成图片，打印用ie的可以码？

Answer 2

这段代码对你绝对有帮助，看看吧：
<SCRIPT LANGUAGE="JavaScript">
<!--
function drawLine(x0,y0,x1,y1,color){
var rs = "";
if (y0 == y1)  //画横线
{
if (x0>x1){var t=x0;x0=x1;x1=t}  
rs = "<p class=emuH style='top:"+y0+";left:"+x0+";background-color:"+color+"; width:"+Math.abs(x1-x0)+"'/>";
}
else if (x0 == x1)  //画竖线
{
if (y0>y1){var t=y0;y0=y1;y1=t} 
rs = "<p class=emuW style='top:"+y0+";left:"+x0+";background-color:"+color+";height:"+Math.abs(y1-y0)+"'/>";
}
else
{
var lx = x1-x0
var ly = y1-y0
var l = Math.sqrt(lx*lx+ly*ly)
rs = new Array();
for (var i=0;i<l;i+=1)
{
var p = i/l;
var px = parseInt(x0 + lx*p);
var py = parseInt(y0 + ly*p);
rs[rs.length] = "<p class=emuWH style='top:"+py+";left:"+px+";background-color:"+color+"'/>";
}
rs = rs.join("");
}
return rs
}
function drawRectangle(x0,y0,x1,y1,color,title)
{
if (x0 == x1 || y0 == y1) return;
if (x0>x1) {var t=x0;x0=x1;x1=t}
if (y0>y1) {var t=y0;y0=y1;y1=t}
return "<table style='top:"+y0+";left:"+x0+";position:absolute' title="+title+"><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+">?</td></table>";
}
function outText(x0,y0,text,fontSize,color){
return "<p style='top:"+y0+";left:"+x0+";position:absolute;color:"+color+";font-size:"+fontSize+"'>"+text+"</p>";
}
var points = new Array(1000);
function drawPie(x0,y0,radius,startAngle,endAngle,color){
if (points.length<radius<<2) points.length=radius<<2;
var startAngle = startAngle*Math.PI/180;
var endAngle = endAngle*Math.PI/180;
var maxX=0,maxY=0,minX=0,minY=0;
var pointsLength = 0;
var lines ;
// get arc points
var step = 1/radius;
for (var i=startAngle;i<endAngle;i+=step){
var x = Math.round(Math.sin(i)*radius);
var y = Math.round(Math.cos(i)*radius)
points[pointsLength++]=[x,y];
if (maxX<x) maxX=x;
if (minX>x) minX=x;
if (maxY<y) maxY=y;
if (minY>y) minY=y;
} // get radius points
var dx1=Math.sin(startAngle)*radius;
var dy1=Math.cos(startAngle)*radius;
var dx2=Math.sin(endAngle)*radius;
var dy2=Math.cos(endAngle)*radius;
var L = Math.sqrt(dx1*dx1+dy1*dy1);
var stepx1 = dx1/L , stepy1 = dy1/L ,stepx2 = dx2/L , stepy2 = dy2/L ;
for (var i=0;i<L;i+=.99){
points[pointsLength++] = [Math.round(stepx1*i),Math.round(stepy1*i)]
points[pointsLength++] = [Math.round(stepx2*i),Math.round(stepy2*i)]
} var dx = maxX-minX+1;
var dy = maxY-minY+1;
if (dx>dy){
lines = new Array(dy);
for (var i=pointsLength-1;i>-1;i--){
var p0 = points[i];
var px = p0[0];
var y = p0[1]-minY;
if (lines[y]){
if (lines[y][0]>px) //left point
lines[y][0] = px;
if (lines[y][1]<px) //right point
lines[y][1] = px;
}else{
lines[y]=[px,px];
}
}
for (var i=dy-1;i>-1;i--){
var left = lines[i][0];
lines[i] =  "<p class=emuH style='top:"+(i+minY+y0)+";left:"+(left+x0)+";width:"+(lines[i][1]-left)+";background-color:"+color+"'/>";
}
}else{
lines = new Array(dx);
for (var i=pointsLength-1;i>-1;i--){
var p0 = points[i];
var py = p0[1];
var x = p0[0]-minX;
if (lines[x]){
if (lines[x][0]>py) //top point
lines[x][0] = py;
if (lines[x][1]<py) //buttom point
lines[x][1] = py;
}else{
lines[x]=[py,py];
}
}
for (var i=dx-1;i>-1;i--){
var top = lines[i][0];
lines[i] =  "<p class=emuW style='left:"+(i+minX+x0)+";top:"+(top+y0)+";height:"+(lines[i][1]-top)+";background-color:"+color+"'/>";
}
}
return lines.join("");
}
function drawArc(x0,y0,radius,startAngle,endAngle,color,step){
if (step == null || isNaN(step)) step=1;
rs = new Array();
tmpar = new Array();
startAngle = startAngle/180*Math.PI;
endAngle = endAngle/180*Math.PI;
for (var i=startAngle;i<endAngle;i+=(step/radius))
{
var dx = parseInt(Math.sin(i)*radius+x0);
var dy = parseInt(Math.cos(i)*radius+y0);
rs[rs.length] = "<p class=emuWH style='top:"+dy+";left:"+dx+";background-color:"+color+"'/>";
}
return (rs.join(""));
}
function fixTo(s,i){
if (s==null || s=="" || isNaN(s) || Math.round(s)==0) return 0;
i = Math.round(i);
if (i==0) return Math.round(s);
if (i==null || isNaN(i) || i<0) i=2;
var v = Math.round(s*Math.pow(10,i)).toString();
if (/e/i.test(v)) return s;
return v.substr(0,v.length-i)+"."+v.substr(v.length-i);
}//-->
</SCRIPT>
<style>
.emuW{position:absolute;font-size:1px;width:1}
.emuH{position:absolute;font-size:1px;height:1}
.emuWH{position:absolute;font-size:1px;width:1;height:1}
A{text-decoration:none;color:#FF66FF}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function drawCol(e){
var div1 = document.getElementById("canvas")
var rows = e.parentNode.parentNode.rows;
var cellIndex = e.cellIndex;
var data = [];
for (var i=1;i<rows.length;i++){
var d = parseInt(rows[i].cells[cellIndex].innerHTML);;
if (isNaN(d)){
alert("Invalid data!");
return;
}
var color = rows[i].bgColor;
var title = rows[i].cells[0].innerHTML;
data[i-1] = [d,color,title]
}
var chartTitle = outText(250,150+(document.all?5:-10),e.innerHTML+"销售情况对比",15,"blue");
div1.innerHTML = chartTitle+drawPoleWidthData(data).join("")+drawPieWidthData(data).join("");
}
function drawPieWidthData(data){
var sum=0;
var rs = new Array();
for (var i=0;i<data.length;i++) sum += data[i][0];
var startAngle = 0;
for (var i=0;i<data.length;i++){
var angle = data[i][0]/sum*360;
rs[i] = drawPie(580,250,100,startAngle,startAngle+=angle,data[i][1])
}
return rs;
}
function drawPoleWidthData(data){
var rs = new Array();
var max = 0;
for (var i=0;i<data.length;i++) if(max<data[i][0])max=data[i][0];
for (var i=0;i<data.length;i++){
rs[rs.length] = outText(i*100+140,400+(document.all?5:-10),data[i][2],12,"blue");
var top = 400-200*data[i][0]/max;
rs[rs.length] = drawRectangle(i*100+130,top,i*100+170,400,data[i][1],"￥"+fixTo(data[i][0]))
}
rs[rs.length]= drawLine(100,400,500,400,"black")
rs[rs.length]= drawLine(100,400,100,150,"black")
rs[rs.length]= drawLine(500,400,490,405,"black")
rs[rs.length]= drawLine(100,150,95,160,"black")
rs[rs.length]= drawLine(500,400,490,395,"black")
rs[rs.length]= drawLine(100,150,105,160,"black")
return rs;
}
function drawRow(e){
var div1 = document.getElementById("canvas")
var row = e.parentNode;
var cells = row.cells;
var rowIndex = row.rowIndex;
var data = [];
for (var i=1;i<cells.length;i++){
var d = parseInt(cells[i].innerHTML);;
if (isNaN(d)){
alert("Invalid data!");
return;
}
var color = row.bgColor;
var title = row.parentNode.rows[0].cells[i].innerHTML;
data[i-1] = [d,color,title]
}
var chartTitle = outText(250,150+(document.all?5:-10),e.innerHTML+"销售情况走向",15,"blue");
div1.innerHTML = chartTitle+drawLineWidthData(data).join("");
}
function drawLineWidthData(data){
var rs = new Array();
rs[rs.length]= drawLine(100,400,500,400,"black")
rs[rs.length]= drawLine(100,400,100,150,"black")
rs[rs.length]= drawLine(500,400,490,405,"black")
rs[rs.length]= drawLine(100,150,95,160,"black")
rs[rs.length]= drawLine(500,400,490,395,"black")
rs[rs.length]= drawLine(100,150,105,160,"black")
var max = 0;
for (var i=0;i<data.length;i++) if(max<data[i][0])max=data[i][0];
var top;
for (var i=0;i<data.length;i++){
rs[rs.length] = outText(i*100+140,400+(document.all?5:-10),data[i][2],12,"blue");
if (i>0){
rs[rs.length] = drawLine(i*100+50,top,i*100+150,(400-200*data[i][0]/max),data[i][1])
}
top = 400-200*data[i][0]/max;
}
return rs;
}
//-->
</SCRIPT>

Answer 3

第二贴：
</HEAD>
<BODY>
<TABLE bgcolor=black cellspacing=1>
<TR bgcolor=#FFFFCC>
<TD>销售额</TD>
<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">1月</A></TD>
<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">2月</A></TD>
<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">3月</A></TD>
<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">4月</A></TD>
</TR>
<TR bgcolor=#CCFFCC>
<TD onclick="drawRow(this)"><A HREF="javascript:;">整机</A></TD>
<TD>112535</TD>
<TD>152430</TD>
<TD>214235</TD>
<TD>182240</TD>
</TR>
<TR bgcolor=#CCCCFF>
<TD onclick="drawRow(this)"><A HREF="javascript:;">显示器</A></TD>
<TD>76230</TD>
<TD>70549</TD>
<TD>68452</TD>
<TD>83653</TD>
</TR>
<TR bgcolor=#FFCCCC>
<TD onclick="drawRow(this)"><A HREF="javascript:;">主板</A></TD>
<TD>54358</TD>
<TD>45632</TD>
<TD>44235</TD>
<TD>55843</TD>
</TR>
</TABLE>
<div id=canvas></div>
</BODY>
</HTML>

Answer 4

to pingzi3000(呼唤雄性的光芒) :
大虾，太强了！
向你致敬！

Answer 5

JSP调用JavaBean在网页上动态生成柱状图[本页面推荐在1024x768分辩率下浏览]
文章类别：JSP实例   发表日期：2003-12-10  星期三  
    
      
 --------------------------------------------------------------------------------
 
转自：动态网制作指南 www.knowsky.com
　　我们经常要在网页看到一些动态更新的图片,最常见的莫过于股票的K线图，本文试图通过一个简单的实例，向大家展示如何通过JSP 调用JavaBean在网页上动态生成柱状图。 
　　背景：本人最近在为某统计局开发项目时,涉及到在网页上动态生成图片的问题，费了一天的时间,终于搞定,为帮助大家在以后遇到同样的问题时不走弯路，现将设计思想及源代码公布出来，与大家共勉。以下代码在Windows2000成功测试通过，Web应用服务器采用Allaire公司的Jrun3.0。
　　第一步：创建一个Java Bean用来生成jpg文件 　　源程序如下： //生成图片的 Java Bean 
//作者:崔冠宇 
//日期:2001-08-24 
import java.io.*; 
import java.util.*; 
import com.sun.image.codec.jpeg.*; 
import java.awt.image.*; 
import java.awt.*; public class ChartGraphics { 
　BufferedImage image; 
　public void createImage(String fileLocation) { 
　　try { 
　　　FileOutputStream fos = new FileOutputStream(fileLocation); 
　　　BufferedOutputStream bos = new BufferedOutputStream(fos); 
　　　JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(bos); 
　　　encoder.encode(image); 
　　　bos.close(); 
　　} catch(Exception e) { 
　　　System.out.println(e); 
　　} 
　} 　public void graphicsGeneration(int h1,int h2,int h3,int h4,int h5) { 　　final int X=10; 
　　int imageWidth = 300;//图片的宽度 
　　int imageHeight = 300;//图片的高度 
　　int columnWidth=30;//柱的宽度 
　　int columnHeight=200;//柱的最大高度 　　ChartGraphics chartGraphics = new ChartGraphics(); 
　　chartGraphics.image = new BufferedImage(imageWidth, imageHeight, BufferedImage.TYPE_INT_RGB); 
　　Graphics graphics = chartGraphics.image.getGraphics(); 
　　graphics.setColor(Color.white); 
　　graphics.fillRect(0,0,imageWidth,imageHeight); 
　　graphics.setColor(Color.red); 
　　graphics.drawRect(X+1*columnWidth, columnHeight-h1, columnWidth, h1); 
　　graphics.drawRect(X+2*columnWidth, columnHeight-h2, columnWidth, h2); 
　　graphics.drawRect(X+3*columnWidth, columnHeight-h3, columnWidth, h3); 
　　graphics.drawRect(X+4*columnWidth, columnHeight-h4, columnWidth, h4); 
　　graphics.drawRect(X+5*columnWidth, columnHeight-h5, columnWidth, h5); 
　　chartGraphics.createImage("D:\\temp\\chart.jpg"); 
　} 
} 
 　　解释：createImage(String fileLocation)方法用于创建JPG图片,参数fileLocation为文件路径 　　graphicsGeneration(int h1,int h2,int h3,int h4,int h5)方法用于绘出图片的内容,参数h1……h5为每一个长方形的高度 　　第二步：创建另一个Java Bean从文本文件中读取数据(每一个长方形的高度)，在实际应用中数据存储在Oracle数据库中 　　源程序如下: //读取Text文件中数据的 Java Bean 
//作者:崔冠宇 
//日期:2001-08-24 
import java.io.*; 
public class GetData { 
　int heightArray[] = new int[5]; 
　public int[] getHightArray() { 
　　try { 
　　　RandomAccessFile randomAccessFile = new RandomAccessFile 　　("d:\\temp\\ColumnHeightArray.txt","r"); 
　　　for (int i=0;i＜5;i++) 
　　　{ 
　　　　heightArray[i] = Integer.parseInt(randomAccessFile.readLine()); 
　　　} 
　　} 
　　catch(Exception e) { 
　　　System.out.println(e); 
　　} 
　　return heightArray; 
　} 
}  　　解释： getHightArray()用于从文本中读取数据,将文本中的String类型转换为int类型，并以数组类型返回。 　　第三步：创建JSP文件 　　源程序如下： 
＜%@ page import="ChartGraphics" %＞ 
＜%@ page import="GetData" %＞ 
＜jsp:useBean id="cg" class="ChartGraphics"/＞ 
＜jsp:useBean id="gd" class="GetData"/＞ 
＜%! 
int height[]=new int[5]; 
%＞ 
＜% 
height=gd.getHightArray(); 
cg.graphicsGeneration(height[0],height[1],height[2],height[3],height[4]); 
%＞ 
＜html＞ 
＜body＞ 
＜img src="d:\temp\chart.jpg"＞＜/img＞ 
＜/body＞ 
＜/html＞  　　 解释:JSP首先调用Bean (GetData..class)读取文件中的数据，再调用Bean(ChartGraphics.class)生成图片,最后显示图片。 　　结束语：由于文本(ColumnHeightArray.txt)中的数据可以随时变化，因此生成的图片中的5个长方形的高度是随之变化的，从而实现了图片的动态生成.该设计思想还可以用于制作网站的投票系统。  

Answer 6

告诉大家，webfx的 bindows项目下有完整的包括所有图形的例子，在
bindows095\test\testlauncher.html里，去学习吧
上帝不让ie支持applet,就让我们用jsp+javascrip吧

Answer 7

都太强了！！！牛！
感激.....
使用付费的报表实现还不如使用jfreechart.
vml,svg是什么东东，能解释一下码？（见笑了..、)各位给的解决方案考虑小弟的打印了吧，画出来直接打就可以了吧？？？看来jReport、jFreeReport、JasperReport、styleReport是用来做报表的，兄弟我是要画图，不一样了~~~~~~

Answer 8

bindows在opera.mozila,ie,nescape下都测试可行，我想能在非大规模使用环境下代替jsp的ui技术，也更接近mvc模式，在网络中传送的只是数据，视图由用户自由控制
bindows几个例子很耗资源，学习但慎用!!

Answer 9

也可以用Office自己带的Web 组件

Answer 10

pingzi3000(呼唤雄性的光芒) (给的例子很好，我运行过了，是表格。
感谢~~~~~~~~~~~~~~我要的是柱状图、打印的一整套解决方案，顶一下，还请大家指点。然后结帖。