来csdn一年了,散......

emu 2003-04-15 09:12:26

在csdn发第一篇帖子 http://expert.csdn.net/Expert/TopicView.asp?id=649677&datebasetype=200204 到现在正好一年了。

感谢孟子、秋水和美洲豹等大虾一路上的帮助。特别是秋水。

拿了星星后,也屡屡想不再来了,图个什么呢?

想起大家对我的帮助,觉得自己还是欠了这个论坛的,还是要来还,于是一直泡到了今天。

当初是为了一个在网页上画图表的问题才整天来这里的,现在这样的问题早已不再是问题了,可以用mschart,vml,svg,activeX。不过纯dhtml的实现却似乎一直被认为不可能。上段时间终于研究出了跨浏览器的dhtml图表的实现方法,今天写一个完整的例子,贴出来大家共享吧:

下面的例子在IE5,NS6和MOZ1.3b下通过:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>emu's dhtml chart</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>



...全文
82 74 打赏 收藏 转发到动态 举报
写回复
用AI写文章
74 条回复
切换为时间正序
请发表友善的回复…
发表回复
emu 2003-05-20
  • 打赏
  • 举报
回复
更正不是因为不能用,而是因为起错了名字嘛 :)
shubo2000 2003-05-20
  • 打赏
  • 举报
回复
我顶呀

回复人: emu(ston) ( ) 信誉:160 2003-4-16 9:56:18 得分:0



有点更正:
drawLineWidthData
drawPoleWidthData
drawPieWidthData
应为
drawLineWithData
drawPoleWithData
drawPieWithData

呵呵打错一次,copy错了n次



我试过两种都能正常使用呀,大大,你太棒了
lilei_jn 2003-05-18
  • 打赏
  • 举报
回复
关注
skyover 2003-05-11
  • 打赏
  • 举报
回复
呀。我来这么久了还是五个角。。。汗~~~
emu 2003-05-09
  • 打赏
  • 举报
回复
* 根据懒猫的建议修改为可以在IE下画单个像素宽的线。

* 修正了icon_lee发现的画柱图中的一个bug。

* 由于http://expert.csdn.net/Expert/topic/1669/1669152.xml 被收进精华区无法再回复,所以把更新贴到这里来。


下面横线间的内容为 emu_draw.js 文件。使用示范见:

http://expert.csdn.net/Expert/topic/1669/1669152.xml
中的test.html。

//-----------------------------------------------------------------------
// emu's dhtml painting functions
function drawLine(x0,y0,x1,y1,color){
x0 = Math.round(x0);
x1 = Math.round(x1);
y0 = Math.round(y0);
y1 = Math.round(y1);
var rs = "";
if (y0 == y1){ //»­ºáÏß
if (x0>x1){var t=x0;x0=x1;x1=t}
rs = "<img border=0 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 = "<img border=0 class=emuW style='top:"+y0+";left:"+x0+";background-color:"+color+";height:"+Math.abs(y1-y0)+"'/>";
}
else{
var lx = x1-x0;
var ly = y1-y0;
if (Math.abs(lx)>Math.abs(ly)){
if (ly<0){
var t=x0;x0=x1;x1=t;
t=y0;y0=y1;y1=t;
lx = -lx;
ly = -ly;
}
var dx = lx/ly;
rs = new Array(ly);
for (var i=0;i<ly;i++){
var left,width;
if (dx>0){
left = Math.round(i*dx);
width = Math.round((i+1)*dx)-left;
left += x0;
if (width+left>x1) width = x1-left;
}else{
left = Math.round((i+1)*dx);
width = Math.round((i)*dx)-left;
left += x0;
if (left<x1) {
width = width+left-x1;
left=x1;
}
}
rs[i] = "<img border=0 class=emuH style='top:"+(y0+i)+";left:"+left+";width:"+width+";background-color:"+color+"'/>";
}
}else{
if (lx<0){
var t=x0;x0=x1;x1=t;
t=y0;y0=y1;y1=t;
lx = -lx;
ly = -ly;
}
var dy = ly/lx;
rs = new Array(lx);
for (var i=0;i<lx;i++){
var top,height;
if (dy>0){
top = Math.round(i*dy);
height = Math.round((i+1)*dy)-top;
top += y0;
if (height+top>y1) height = y1-top;
}else{
top = Math.round((i+1)*dy);
height = Math.round((i)*dy)-top;
top += y0;
if (top<y1) {
height = height+top-y1;
top=y1;
}
}
rs[i] = "<img border=0 class=emuW style='top:"+top+";left:"+(x0+i)+";height:"+height+";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>";
return "<span style='top:"+y0+";left:"+x0+";height:"+(y1-y0)+";width:"+(x1-x0)+";background-color:"+color+";position:absolute;font-size:1px'></span>";
}
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(""));
}

document.writeln("<style>");
document.writeln(".emuW{position:absolute;font-size:1px;width:1}");
document.writeln(".emuH{position:absolute;font-size:1px;height:1}");
document.writeln(".emuWH{position:absolute;font-size:1px;width:1;height:1}");
document.writeln("A{text-decoration:none;color:#FF66FF}");
document.writeln("</style>");


// end of script file
//-----------------------------------------------------------------------



superhasty 2003-05-09
  • 打赏
  • 举报
回复
good
runke 2003-05-07
  • 打赏
  • 举报
回复
我感觉csdn这儿高手如云,学到不少东西,每次来这儿都让我收获颇丰,可惜条件限制不能经常上网.
michael_monkey 2003-05-07
  • 打赏
  • 举报
回复
不错
Reker熊 2003-04-19
  • 打赏
  • 举报
回复
emu在js方面我還是非常地佩服!!!

ysharp 2003-04-17
  • 打赏
  • 举报
回复
h
emu_ston 2003-04-17
  • 打赏
  • 举报
回复
上哪玩去了这两天都不见你的?
fokker 2003-04-16
  • 打赏
  • 举报
回复
好久不见秋水了。
fokker 2003-04-16
  • 打赏
  • 举报
回复
哦。
isapi是微软的标准,java应该用不了了。
emu 2003-04-16
  • 打赏
  • 举报
回复
fokker(独孤龙) : 没有接触过,server端我只用java :-P
wangrong 2003-04-16
  • 打赏
  • 举报
回复
好牛啊!

羡慕
佩服
收藏
学习!
lansajf 2003-04-16
  • 打赏
  • 举报
回复
我也真想得信息,不知道得星星的标准是什么?:)
fokker 2003-04-16
  • 打赏
  • 举报
回复
不错不错,好东东啊。

emu有没有研究过isapi啊,这也是个好东东,是标准的动态库,可惜只能用c来做。
也可以实现动态图表的功能。
hzmp3 2003-04-16
  • 打赏
  • 举报
回复
接分
sinzy 2003-04-16
  • 打赏
  • 举报
回复
服就一个字……
JK_10000 2003-04-16
  • 打赏
  • 举报
回复
算一算来CSDN已有一年半了
加载更多回复(54)

87,901

社区成员

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

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