CSS生成图表和曲线，包括圆形百分比
本帖最后由 小麦子 于 2024-10-18 23:59 编辑测试CSS的画图功能，用它生成一个图表，包括数据曲线、圆形百分比饼图，CSS需要和JS配合才能完成。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS数据画图，包括圆形百分比</TITLE>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8">
<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 = "<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=;
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 =
points =
}
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;
var px = p0;
var y = p0-minY;
if (lines){
if (lines>px) //left point
lines = px;
if (lines<px) //right point
lines = px;
}else{
lines=;
}
}
for (var i=dy-1;i>-1;i--){
var left = lines;
lines ="<p class=emuH style='top:"+(i+minY+y0)+";left:"+(left+x0)+";width:"+(lines-left)+";background-color:"+color+"'/>";
}
}else{
lines = new Array(dx);
for (var i=pointsLength-1;i>-1;i--){
var p0 = points;
var py = p0;
var x = p0-minX;
if (lines){
if (lines>py) //top point
lines = py;
if (lines<py) //buttom point
lines = py;
}else{
lines=;
}
}
for (var i=dx-1;i>-1;i--){
var top = lines;
lines ="<p class=emuW style='left:"+(i+minX+x0)+";top:"+(top+y0)+";height:"+(lines-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 = "<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.cells.innerHTML);;
if (isNaN(d)){
alert("Invalid data!");
return;
}
var color = rows.bgColor;
var title = rows.cells.innerHTML;
data =
}
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;
var startAngle = 0;
for (var i=0;i<data.length;i++){
var angle = data/sum*360;
rs = drawPie(580,250,100,startAngle,startAngle+=angle,data)
}
return rs;
}
function drawPoleWidthData(data){
var rs = new Array();
var max = 0;
for (var i=0;i<data.length;i++) if(max<data)max=data;
for (var i=0;i<data.length;i++){
rs = outText(i*100+140,400+(document.all?5:-10),data,12,"blue");
var top = 400-200*data/max;
rs = drawRectangle(i*100+130,top,i*100+170,400,data,"￥"+fixTo(data))
}
rs= drawLine(100,400,500,400,"black")
rs= drawLine(100,400,100,150,"black")
rs= drawLine(500,400,490,405,"black")
rs= drawLine(100,150,95,160,"black")
rs= drawLine(500,400,490,395,"black")
rs= 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.innerHTML);;
if (isNaN(d)){
alert("Invalid data!");
return;
}
var color = row.bgColor;
var title = row.parentNode.rows.cells.innerHTML;
data =
}
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= drawLine(100,400,500,400,"black")
rs= drawLine(100,400,100,150,"black")
rs= drawLine(500,400,490,405,"black")
rs= drawLine(100,150,95,160,"black")
rs= drawLine(500,400,490,395,"black")
rs= drawLine(100,150,105,160,"black")
var max = 0;
for (var i=0;i<data.length;i++) if(max<data)max=data;
var top;
for (var i=0;i<data.length;i++){
rs = outText(i*100+140,400+(document.all?5:-10),data,12,"blue");
if (i>0){
rs = drawLine(i*100+50,top,i*100+150,(400-200*data/max),data)
}
top = 400-200*data/max;
}
return rs;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE bgcolor=black cellspacing=1>
<TR bgcolor=#FFFFCC>
<TD>销售额</TD>
<TD align=center><A HREF="javascript:;">1月</A></TD>
<TD align=center><A HREF="javascript:;">2月</A></TD>
<TD align=center><A HREF="javascript:;">3月</A></TD>
<TD align=center><A HREF="javascript:;">4月</A></TD>
</TR>
<TR bgcolor=#CCFFCC>
<TD><A HREF="javascript:;">整机</A></TD>
<TD>678432</TD>
<TD>981233</TD>
<TD>543215</TD>
<TD>323211</TD>
</TR>
<TR bgcolor=#CCCCFF>
<TD><A HREF="javascript:;">显示器</A></TD>
<TD>78905</TD>
<TD>67534</TD>
<TD>98654</TD>
<TD>123454</TD>
</TR>
<TR bgcolor=#FFCCCC>
<TD><A HREF="javascript:;">主板</A></TD>
<TD>567324</TD>
<TD>56321</TD>
<TD>09876</TD>
<TD>14523</TD>
</TR>
</TABLE>
<div id=canvas></div>
</BODY>
</HTML>
页:
[1]