CSS生成图表和曲线，包括圆形百分比

答案：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS数据画图，包括圆形百分比</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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 ;
	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;
	}
	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]= drawLi
上一个：CSS网站变灰代码
下一个：CSS滤镜给字体加阴影、模糊、透明的方法
更多图片编程知识: