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

jackal81 2003-09-11 04:08:53
请问如何将数据库里传出来的数据用柱状图或柄状图形式显示??大家讨论讨论.谁能给段例子!分不够我再给!!!!
...全文
109 23 打赏 收藏 转发到动态 举报
写回复
用AI写文章
23 条回复
切换为时间正序
请发表友善的回复…
发表回复
jackal81 2003-09-12
  • 打赏
  • 举报
回复
请问VML或SVG怎么用?小弟实在是不会
tangqiuzheng 2003-09-12
  • 打赏
  • 举报
回复
海之牙的高见?
jackal81 2003-09-12
  • 打赏
  • 举报
回复
都有哪些包?
seafo 2003-09-12
  • 打赏
  • 举报
回复
如果是jsp,有现成的VML或SVG不用,竟然用编程实现,正是傻B
zeeler 2003-09-12
  • 打赏
  • 举报
回复
你的jar包放在lib目录里
tangqiuzheng 2003-09-12
  • 打赏
  • 举报
回复
请贴代码的同志,适当地加点注释,谢谢
jackal81 2003-09-12
  • 打赏
  • 举报
回复
我用jfreechart了,可是怎么总是找不到我要倒入的包呢?怎么回事?我已经把
jcommon-0.8.5,jfreechart-0.9.11两个文件夹放到classpath中了为什么还是找不到???
NBAAllStar 2003-09-12
  • 打赏
  • 举报
回复
上面<body>到</body>之间的网页代码,很短,里面的数值书写很自由,比如76、<%=value%>等。

你可以根据实际情况修改<head>到</head>之间的JavaScript,很容易修改。

===============================================

欢迎访问我的个人主页:

http://suyulin.6to23.com


chenxb1980 2003-09-12
  • 打赏
  • 举报
回复
用brio
NBAAllStar 2003-09-12
  • 打赏
  • 举报
回复
<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>
NBAAllStar 2003-09-12
  • 打赏
  • 举报
回复
下面的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)+"> </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>
jackal81 2003-09-12
  • 打赏
  • 举报
回复
jfreechart的环境变量怎么设呀!
tangqiuzheng 2003-09-12
  • 打赏
  • 举报
回复
我们用的方法,是ORACLE公司开发的一个代码库,电量或者曲线什么的,都以小图片的形式拼凑起来的。每个小图片是一个鼠标即指提示的超链接。

和地图一样,中国地图你点击某个省,鼠标会现出即指提示,提示这是哪个省,面积多大,等等。

不同的数据,调用的图片的尺寸不同,这些小图片的不同尺寸,拼凑在一起后,就象是个完整的柱状图或者链路图
seafo 2003-09-12
  • 打赏
  • 举报
回复
<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>
  <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>
  <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>
seafo 2003-09-12
  • 打赏
  • 举报
回复
给你一个例子
http://xuanyuan.9966.org/books/xml/vml/step313.html
gjd111686 2003-09-11
  • 打赏
  • 举报
回复
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();
%>
whodsow 2003-09-11
  • 打赏
  • 举报
回复
《JSP编程指南(第二版)》里面就有,好像是发送二进制数据的问题嘛,很简单的,你看看就明白了。
xqi8 2003-09-11
  • 打赏
  • 举报
回复
jfreechart
kaerme 2003-09-11
  • 打赏
  • 举报
回复
chartbuilder.jar

google.com里找找看
Kick_hotdog 2003-09-11
  • 打赏
  • 举报
回复
用jfreechart
http://www-900.ibm.com/developerWorks/cn/java/l-jfreechart/

这里有jfreechart介绍,very good.
加载更多回复(3)

81,091

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧