大家节日好!!!请问如何将数据库里传出来的数据用柱状图或柄状图形式显示??大家研究一下

用jfreechart
http://www-900.ibm.com/developerWorks/cn/java/l-jfreechart/这里有jfreechart介绍，very good.

解决方案 »

  1.   

    chartbuilder.jar google.com里找找看
      

  2.   

    《JSP编程指南（第二版）》里面就有，好像是发送二进制数据的问题嘛，很简单的，你看看就明白了。
      

  3.   

    ShowImage.jsp
    <img src="/Test/Image.jsp?ElementCount=<%=4%>&ShowType=<%=1%>&Data=">
    Image.jsp
    <%@ page import="java.io.*"%>
    <%@ page import="java.util.*"%>
    <%@ page import="com.sun.image.codec.jpeg.*"%>
    <%@ page import="java.awt.*"%>
    <%@ page import="java.awt.geom.*"%>
    <%@ page import="java.awt.image.*"%>
    <%
    response.setHeader("Cache-Control","no-store");
    response.setDateHeader("Expires",0);
    response.setContentType("image/jpeg");
    OutputStream outImage=response.getOutputStream();
    Color color[]={Color.red,Color.black,Color.orange,Color.green};
    BufferedImage bufImage=new BufferedImage(150,100,BufferedImage.TYPE_INT_RGB);
    Graphics2D g=(Graphics2D)bufImage.getGraphics();
    g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);
    g.setColor(Color.white);
    g.fillRect(0,0,150,100); 
    int iBaseAng=30;
    int iElementCount,iShowType;
    String strElementCount=request.getParameter("ElementCount");
    String strShowType=request.getParameter("ShowType");
    String strData=request.getParameter("Data");
    if(strElementCount!=null)
    {iElementCount=4;}
    else
    {iElementCount=4;}
    if(strShowType!=null)
    {iShowType=1;}
    else
    {iShowType=1;}
    int[] Array_Ang=new int[iElementCount];
    Array_Ang[0]=(int)(.35*360);
    Array_Ang[1]=(int)(.15*360);
    Array_Ang[2]=(int)(.25*360);
    Array_Ang[3]=360-Array_Ang[0]-Array_Ang[1]-Array_Ang[2];
    AffineTransform iAt=null;
    Arc2D m_Arc=null;
    int iFromAng=iBaseAng;
    iAt=AffineTransform.getRotateInstance((-20*java.lang.Math.PI)/180,45,37);
    g.setTransform(iAt);
    switch(iShowType)
    {
    case 1:
    int iR=6;
    int iX=(int)(iR*java.lang.Math.cos((iBaseAng+Array_Ang[0])/2.0*java.lang.Math.PI/180));
    int iY=(int)(iR*java.lang.Math.sin((iBaseAng+Array_Ang[0])/2.0*java.lang.Math.PI/180));
    m_Arc=new Arc2D.Double(10+iX,24-iY,80,50,iFromAng,Array_Ang[0],Arc2D.PIE);
    g.setColor(color[0]);
    g.fill(m_Arc);
    iFromAng+=Array_Ang[0];
    for(int iIndex=1;iIndex<iElementCount;iIndex++)
    {
    g.setColor(color[iIndex]);
    m_Arc=new Arc2D.Double(10,24,80,50,iFromAng,Array_Ang[iIndex],Arc2D.PIE);
    g.fill(m_Arc);
    iFromAng+=Array_Ang[iIndex];
    if(iFromAng>360)
    {
    iFromAng-=360;
    }
    }
    break;
    case 2:
    break;
    default:
    break;
    }
    iAt=AffineTransform.getRotateInstance(0,m_Arc.getCenterX(),m_Arc.getCenterY());
    g.setTransform(iAt);
    for(int jIndex=0;jIndex<iElementCount;jIndex++)
    {
    g.setColor(color[jIndex]);
    g.fillRect(100,15*jIndex+20,10,10);
    g.drawString("No."+jIndex,120,15*jIndex+20+8);
    }
    JPEGImageEncoder encoder=JPEGCodec.createJPEGEncoder(outImage);
    encoder.encode(bufImage);
    outImage.close();
    %>
      

  4.   

    我们用的方法，是ORACLE公司开发的一个代码库，电量或者曲线什么的，都以小图片的形式拼凑起来的。每个小图片是一个鼠标即指提示的超链接。和地图一样，中国地图你点击某个省，鼠标会现出即指提示，提示这是哪个省，面积多大，等等。不同的数据，调用的图片的尺寸不同，这些小图片的不同尺寸，拼凑在一起后，就象是个完整的柱状图或者链路图
      

  5.   

    jfreechart的环境变量怎么设呀!
      

  6.   

    下面的HTML文件可以实现（注意：代码比较长，我分2次贴在下面）------
    ************************<HTML>
    <HEAD>
    <TITLE>画图</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="emu">
    <META NAME="Keywords" CONTENT="chart javascript">
    <META NAME="Description" CONTENT="emu's dhtml chart">
    <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)+">&nbsp;</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>
      

  7.   

    <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,770,400,"black")
    rs[rs.length]= drawLine(100,400,100,150,"black")
    rs[rs.length]= drawLine(770,400,760,405,"black")
    rs[rs.length]= drawLine(100,150,95,160,"black")
    rs[rs.length]= drawLine(770,400,760,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>
    </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>
    <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">第5场</A></TD>
    <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">第6场</A></TD>
    <TD onclick="drawCol(this)" align=center><A HREF="javascript:;">第7场</A></TD>
    </TR>
    <TR bgcolor=#CCFFCC>
    <TD onclick="drawRow(this)"><A HREF="javascript:;">二分球</A></TD>
    <TD>14</TD>
    <TD>24</TD>
    <TD>8</TD>
    <TD>32</TD>
    <TD>12</TD>
    <TD>18</TD>
    <TD>22</TD>
    </TR>
    <TR bgcolor=#CCCCFF>
    <TD onclick="drawRow(this)"><A HREF="javascript:;">三分球</A></TD>
    <TD>9</TD>
    <TD>3</TD>
    <TD>15</TD>
    <TD>6</TD>
    <TD>3</TD>
    <TD>9</TD>
    <TD>3</TD>
    </TR>
    <TR bgcolor=#FFCCCC>
    <TD onclick="drawRow(this)"><A HREF="javascript:;">罚球</A></TD>
    <TD>8</TD>
    <TD>7</TD>
    <TD>2</TD>
    <TD>11</TD>
    <TD>3</TD>
    <TD>5</TD>
    <TD>12</TD>
    </TR>
    </TABLE>
    <div id=canvas></div>
    </BODY>
    </HTML>
      

  8.   

    上面<body>到</body>之间的网页代码，很短，里面的数值书写很自由，比如76、<%=value%>等。你可以根据实际情况修改<head>到</head>之间的JavaScript，很容易修改。===============================================欢迎访问我的个人主页：http://suyulin.6to23.com
      

  9.   

    我用jfreechart了,可是怎么总是找不到我要倒入的包呢?怎么回事?我已经把
    jcommon-0.8.5,jfreechart-0.9.11两个文件夹放到classpath中了为什么还是找不到???
      

  10.   

    如果是jsp,有现成的VML或SVG不用，竟然用编程实现，正是傻B
      

  11.   

    请问VML或SVG怎么用?小弟实在是不会
      

  12.   

    给你一个例子
    http://xuanyuan.9966.org/books/xml/vml/step313.html
      

  13.   

    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <HEAD>
    <TITLE>VML sample </TITLE>
    <STYLE>
     v\:* { BEHAVIOR: url(#default#VML) }
    </STYLE>
    <SCRIPT LANGUAGE="JavaScript">
    function changeit()
    {
     banana.value=100-(parseInt(apple.value)+parseInt(pear.value));
     showPie();
    }
    var r=2000;
    function createPie(sa,ea,color,n) //sa是起始角度,ea是结束角度,color是颜色,n是title
    {
      var fs=Math.PI*2*(sa/360);
      var fe=Math.PI*2*(ea/360);
      var sx=parseInt(r*Math.sin(fs));
      var sy=parseInt(-r*Math.cos(fs));
      var ex=parseInt(r*Math.sin(fe));
      var ey=parseInt(-r*Math.cos(fe));
      var newPie=document.createElement("<v:shape title='"+n+"' style='position:absolute;z-index:8;width:"+2*r+";height:"+2*r+"' CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+color+"' strokecolor='black' path='m0,0 l "+sx+","+sy+" ar -2000,-2000,2000,2000,"+ex+","+ey+","+sx+","+sy+" l0,0 x e' />");
      pie.insertBefore(newPie);
    }
    function showPie()
    {
      pie.innerHTML=""; 
      createPie(0,parseInt(banana.value)*3.6,"blue","香蕉");
    createPie(parseInt(banana.value)*3.6,parseInt(banana.value)*3.6+parseInt(apple.value)*3.6,"red","苹果");
      createPie(parseInt(banana.value)*3.6+parseInt(apple.value)*3.6,360,"green","梨");
    }
    </script>
    </HEAD>
    <BODY onload="changeit()">
    <font color=red>苹果</font>：
    <select id="apple" onchange="changeit()">
    <option value="10">10%
    <option value="20">20%
    <option value="30">30%
    <option value="40">40%
    <option value="50">50%
    </select>
    &nbsp;&nbsp;<font color="green">梨</font>：
    <select id="pear" onchange="changeit()">
    <option value="5">5%
    <option value="10">10%
    <option value="20">20%
    <option value="30">30%
    <option value="40">40%
    </select>
    &nbsp;&nbsp;<font color="blue">香蕉</font>：<input id="banana" type="text" readonly size="2" value="85">%<br><br>
    <v:group ID="group1" CoordOrig="-3000,-2000" CoordSize="6000,4000" style="width:300;height:200;position:relative">
    <v:rect style="position:relative;left:-3000;top:-3000;WIDTH:6000;HEIGHT:6000;" fillcolor="white" strokecolor="black">
    <v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow>
    </v:rect>
    <div id="pie"></div>
    </v:group>
    </BODY>
    </HTML>