下面的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>
<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>
不过就调用了一个com件,不算纯java实现
我现在也正在思考如何用纯java实现
一:jfreechart介绍
jfreechart是一个免费创建图片的java工具.可以创建如下图形:
饼图(pie charts;)
曲线图(line charts )
柱状图(horizontal/vertical bar charts)
甘特图(Gantt charts; )
XY plots and scatter plots;
time series, high/low/open/close charts and candle stick charts;
combination charts;
Pareto charts;
bubble charts;
wind plots, meter charts and symbol charts;
从以下地址可以看到jfreechart可以创建的图形类型
http://www.jfree.org/jfreechart/samples.html
sourceforge有一个基于jfreechart的项目Cewolf可以很方便的在jsp/servlet中创建图片
jfreechart目前(2003-05-08)版本为0.98
希望得到详细的信息或下载jfreechart请访问如下站点:
http://www.jfree.org/jfreechart/jfreechart是一个开源项目,但是文档是需要40美金去购买的。
还有一个很重要的问题,jfreechart如果使用中文,他使用的默认字体
显示出来的中文会很模糊,你可能需要修改源代码。
下面我就举几个简单的例子说明一下如何使用jfreechart创建图片
在开发中有可能会导入以下的类
import com.jrefinery.chart.ChartFactory;
import com.jrefinery.chart.ChartUtilities;
import com.jrefinery.chart.JFreeChart;
import com.jrefinery.chart.TextTitle;
import com.jrefinery.chart.axis.NumberAxis;
import com.jrefinery.chart.plot.CategoryPlot;
import com.jrefinery.chart.plot.PiePlot;
import com.jrefinery.data.Day;
import com.jrefinery.data.DefaultCategoryDataset;
import com.jrefinery.data.DefaultPieDataset;
import com.jrefinery.data.TimeSeries;
import com.jrefinery.data.TimeSeriesCollection;
import com.jrefinery.data.TimeSeriesDataPair;
在0.98以后包由com.jrefinery.*改变为:org.jfree三:创建饼图
//图片标题
String title = "空调2002年市场占有率";
//设定数据源
DefaultPieDataset piedata = new DefaultPieDataset();
//第一个参数为名称,第二个参数是double数
piedata.setValue("联想", 27.3);
piedata.setValue("长城", 12.2);
piedata.setValue("海尔", 5.5);
piedata.setValue("美的", 17.1);
piedata.setValue("松下", 9.0);
piedata.setValue("科龙", 19.0);
//创建JFreeChart,都使用ChartFactory来创建JFreeChart,很标准的工厂设计模式
JFreeChart chart =
ChartFactory.createPieChart(title, piedata, true, true, true);
//设定图片标题
chart.setTitle(new TextTitle(title, new Font("隶书", Font.ITALIC, 15)));
//chart.addSubtitle(new TextTitle("2002财年分析", new Font("隶书", Font.ITALIC, 12)));
//设定背景
chart.setBackgroundPaint(Color.white);
//chart.s
//饼图使用一个PiePlot
PiePlot pie = (PiePlot)chart.getPlot();
//pie.setSectionLabelType(PiePlot.NAME_AND_PERCENT_LABELS);
pie.setSectionLabelType(PiePlot.NAME_AND_VALUE_LABELS);
//设定显示格式(名称加百分比或数值)
pie.setPercentFormatString("#,###0.0#%");
//设定百分比显示格式
pie.setBackgroundPaint(Color.white);
pie.setSectionLabelFont(new Font("黑体", Font.TRUETYPE_FONT, 12));
//设定背景透明度(0-1.0之间)
pie.setBackgroundAlpha(0.6f);
//设定前景透明度(0-1.0之间)
pie.setForegroundAlpha(0.90f);
//输出文件到指定目录
String rfname = MathUtil.getRoundCode(12) + ".jpeg";
String fileName = "d:/test/" + rfname;
try {
//可以保存文件为jpg或png格式。
ChartUtilities.saveChartAsJPEG(new File(fileName), 100, chart, 600, 600);
//第一个参数为文件名
//第二个参数质量
//第三个参数为哪个chart创建图片
//第四个宽度
//第五个高度
} catch (IOException exz) {
System.out.print("....Cant't Create image File");
}其实使用JFreeChart创建图片很简单,不同的的图片类型区别在于设置数据集四:创建曲线图
// create a default chart based on some sample data...
//曲线图标题
String title = "趋势分析";
//曲线图X轴提示
String domain = "月份走势";
//曲线图Y轴提示
String range = "应收余额";
//曲线图自标题
String subtitleStr = "2003财年分析";
//创建时间数据源
//每一个TimeSeries在图上是一条曲线
TimeSeries ca = new TimeSeries("用友");
for (int i = 1999; i < 2005; i++) {
for (int mon = 0; mon < 12; mon++) {
//ca.add(new Month(mon + 1, i), new Double(500 + Math.random() * 100));
//TimeSeriesDataPair是一个时间点的数值体现
ca.add(
new TimeSeriesDataPair(
new Day(1, mon + 1, i),
new Double(500 + Math.random() * 100)));
}
}TimeSeries ibm = new TimeSeries("金碟");
for (int i = 1999; i < 2005; i++) {
for (int mon = 0; mon < 12; mon++) {
//ibm.add(new Month(mon+1,i),new Double(400-Math.random()*100));
ibm.add(
new TimeSeriesDataPair(
new Day(1, mon + 1, i),
new Double(400 - Math.random() * 100)));
}
}TimeSeries king = new TimeSeries("东软");
for (int i = 1999; i < 2005; i++) {
for (int mon = 0; mon < 12; mon++) {
//ibm.add(new Month(mon+1,i),new Double(400-Math.random()*100));
king.add(
new TimeSeriesDataPair(
new Day(1, mon + 1, i),
new Double(300 - Math.random() * 100)));
}
}
//时间曲线数据集合
TimeSeriesCollection dataset = new TimeSeriesCollection();
dataset.addSeries(ca);
dataset.addSeries(ibm);
dataset.addSeries(king);
//dataset.addSeries(jpy);
//dataset.addSeries(mav);
//时间曲线元素
JFreeChart chart =
ChartFactory.createTimeSeriesChart(
title,
domain,
range,
dataset,
true,
true,
false);
// then customise it a little...
TextTitle subtitle =
new TextTitle(subtitleStr, new Font("黑体", Font.BOLD, 12));
chart.addSubtitle(subtitle);
chart.setTitle(new TextTitle(title, new Font("隶书", Font.ITALIC, 15)));
//pie.setSeriesLabelFont(new Font("黑体", Font.BOLD, 15));
chart.setBackgroundPaint(
new GradientPaint(0, 0, Color.white, 0, 1000, Color.blue));
//sysout
//输出文件到指定目录
String rfname = MathUtil.getRoundCode(22) + ".jpeg";
String fileName = "d:/test/" + rfname;
try {
//for
//System.out.println();
ChartUtilities.saveChartAsJPEG(new File(fileName), 100, chart, 600, 600);
// log.info("....Create image File:" + fileName);
} catch (IOException exz) {
System.out.print("....Cant't Create image File");
}
五:创建柱状图
String title = "柱状图测试";
String domain = "单位比较";
String range = "数值";
//CategoryDataset data = DemoDatasetFactory.createCategoryDataset();
DefaultCategoryDataset data = new DefaultCategoryDataset();
for (int r = 0; r < 5; r++) {
String rowKey = "单位 [" + (r + 1)+"]" ;
//第一层循环:分析对象
for (int c = 0; c < 6; c++) {
//第二层循环:分析对象在时间点上的数据
String columnKey = "2001年" + (c + 1) + "月";
data.addValue(new Double(r * c + 5), rowKey, columnKey);
}
}JFreeChart chart =
ChartFactory.createVerticalBarChart(
title,
domain,
range,
data,
true,
true,
false);
// then customise it a little...
chart.setBackgroundPaint(
new GradientPaint(0, 0, Color.white, 1000, 0, Color.red));
chart.setTitle(new TextTitle(title, new Font("隶书", Font.ITALIC, 15)));
CategoryPlot plot = (CategoryPlot)chart.getPlot();
plot.setForegroundAlpha(0.9f);
plot.setValueLabelFont(new Font("黑体", Font.TRUETYPE_FONT, 12));
//plot.setSectionLabelFont(new Font("黑体", Font.TRUETYPE_FONT, 12));
//注意以下代码
NumberAxis verticalAxis = (NumberAxis)plot.getRangeAxis();
verticalAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());
// 输出文件到指定目录
String rfname = MathUtil.getRoundCode(22) + "b.jpeg";
String fileName = "d:/test/" + rfname;
try {
ChartUtilities.saveChartAsJPEG(new File(fileName), 100, chart, 600, 600);
// log.info("....Create image File:" + fileName);
} catch (IOException exz) {
System.out.print("....Cant't Create image File");
}
留下你的邮箱,给你发个例子,
import java.io.*;
import java.util.*;
import java.awt.*;
import org.jfree.chart.*;
import org.jfree.chart.plot.*;
import org.jfree.data.*;public class Chart { public Chart(){
} public void creatPie(){
//图片标题
String title = "空调2002年市场占有率";
//设定数据源
DefaultPieDataset piedata = new DefaultPieDataset();
//第一个参数为名称,第二个参数是double数
piedata.setValue("联想", 27.3);
piedata.setValue("长城", 12.2);
piedata.setValue("海尔", 5.5);
piedata.setValue("美的", 17.1);
piedata.setValue("松下", 9.0);
piedata.setValue("科龙", 19.0); //创建JFreeChart,都使用ChartFactory来创建JFreeChart,很标准的工厂设计模式
JFreeChart chart = ChartFactory.createPieChart(title, piedata, true, true, true); //设定图片标题
chart.setTitle(new TextTitle(title, new Font("隶书", Font.ITALIC, 15)));
//chart.addSubtitle(new TextTitle("2002财年分析", new Font("隶书", Font.ITALIC, 12))); //设定背景
chart.setBackgroundPaint(Color.white);
//chart.s
//饼图使用一个PiePlot
PiePlot pie = (PiePlot)chart.getPlot();
//pie.setSectionLabelType(PiePlot.NAME_AND_PERCENT_LABELS);
pie.setSectionLabelType(PiePlot.NAME_AND_VALUE_LABELS);
//设定显示格式(名称加百分比或数值)
pie.setPercentFormatString("#,###0.0#%");
//设定百分比显示格式
pie.setBackgroundPaint(Color.white);
pie.setSectionLabelFont(new Font("黑体", Font.TRUETYPE_FONT, 12));
//设定背景透明度(0-1.0之间)
pie.setBackgroundAlpha(0.6f);
//设定前景透明度(0-1.0之间)
pie.setForegroundAlpha(0.90f);
//输出文件到指定目录
//String rfname = MathUtil.getRoundCode(12) + ".jpeg";
String rfname = "pie.jpeg";
String fileName = "d:/test/" + rfname;
try {
//可以保存文件为jpg或png格式。
ChartUtilities.saveChartAsJPEG(new File(fileName), 100, chart, 600, 600);
//第一个参数为文件名
//第二个参数质量
//第三个参数为哪个chart创建图片
//第四个宽度
//第五个高度
}
catch (IOException exz) {
System.out.print("....Cant't Create image File");
} } public static void main(String [] args){
try{
new Chart().creatPie();
System.out.println("ok!");
}
catch(Exception e){
}
}
}以上我的代码编译通过运行出错.我用的是jfreechart-0.9.11
哪位大侠给解释一下!!!error:
java.lang.NoClassDefFoundError: org/jfree/util/PaintTable at org.jfree.chart.plot.PiePlot.initialise(Unknown Source) at org.jfree.chart.plot.PiePlot.<init>(Unknown Source) at org.jfree.chart.ChartFactory.createPieChart(Unknown Source) at com.legendit.cems.common.Chart.creatPie(Chart.java:40) at com.legendit.cems.common.Chart.main(Chart.java:83)Exception in thread "main"
[email protected]
************************<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>
.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>
用JavaScript不好传值,而且这个文件改成即出错
******而且这个文件改成jsp即出错******没有啊,我把它改成jsp,一切正常啊:)你再“烟酒烟酒”里面的代码吧:)===============================================欢迎访问我的个人主页:http://suyulin.6to23.com
我自己写了一个组件,和JFreeReport类似,能在JSP和Servlet中实现统计图效果,不过只能画2D的,饼、柱、线都可以……
代码太多,不能贴上来啊……
但是有一些傻瓜客户用IE6的时候一切都完了……
http://www.csdn.net/develop/article/20/20517.shtm
有vml 和 svg不用还混什么网页编程
http://xuanyuan.9966.org/books/xml/vml/step313.html
<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)
{
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>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Thinking in VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css" />
<script>
function drawBar(v,t)
{
var h=v*245-50;
var px=2750-v*245;
var py=170+t*300;
var newShape= document.createElement("<v:rect style='position:absolute;left:"+py+";top:"+px+";WIDTH:190px;HEIGHT:"+h+"px;z-index:9' coordsize='21600,21600'></v:rect>")
var fill=document.createElement("<v:fill color='#5BA4E6' opacity='0.8' />");
var extrusion=document.createElement("<v:extrusion skewamt='0.3' on=True/>");
newShape.insertBefore(fill);
newShape.insertBefore(extrusion);
group1.insertBefore(newShape);
}
function drawBars()
{
drawBar(6,1);
drawBar(6,3);
drawBar(3,5);
drawBar(9,7);
drawBar(5,9);
drawBar(3,11);
}
</script>
<body onload="drawBars()">
<table align="center">
<tr>
<td align="center" class="title"><strong>数据图表</strong></td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px"><v:group ID="group1" style="WIDTH:700px;HEIGHT:500px" coordsize="4900,3500">
<v:line from="200,100" to="200,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
<v:stroke StartArrow="classic"/>
</v:line>
<v:line from="200,2700" to="4500,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
<v:stroke EndArrow="classic"/>
</v:line>
<v:rect style="WIDTH:4600px;HEIGHT:2900px" coordsize="21600,21600" fillcolor="white" strokecolor="black">
<v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow>
</v:rect>
<v:shape style="position:absolute;left:50;top:2650;WIDTH:1000px;HEIGHT:200px;z-index:8" coordsize="21600,21600" fillcolor="white">
<v:textbox id="text1" inset="3pt,0pt,3pt,0pt" align="center" style="font-size:10pt;v-text-anchor:bottom-center-baseline">0</v:textbox>
</v:shape>
</v:group><br></div>
</td>
</tr>
</table>
</body>
</html>
有例子的发个例子给我参考学习!谢谢![email protected]
[email protected]
mail:[email protected]
参考了一点 http://www.cn-java.com/target/news.php?news_id=723
自己写出来了,效果还不错。
刚刚找到一处介绍JFreeChart的
http://www-900.ibm.com/developerWorks/cn/java/l-jfreechart/再次感谢大家的GZ