try this

emu_ston 2003-04-06 06:37:49
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Author" CONTENT="emu(ston)">
<META NAME="Keywords" CONTENT="javascript,chart">
<title>emu's paint without vlm</title>
</head>
<body>
<button onclick="testNewPie()">画饼图</button>
<div id=canvas></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var div1 = document.getElementById("canvas")

function testNewPie(){
div1.innerHTML = newPie(300,300,150,0,45,"red")+newPie(300,300,150,45,110,"blue")+newPie(300,300,150,110,250,"yellow")+newPie(300,300,150,250,360,"green");
}


function newPie(x0,y0,radius,startAngle,endAngle,color){
startAngle = startAngle/360*Math.PI*2;
endAngle = endAngle/360*Math.PI*2;
points = [];
// get arc points
var step = 1/radius;
for (var i=startAngle;i<endAngle;i+=step){
var dx = parseInt(Math.sin(i)*radius+x0);
var dy = parseInt(Math.cos(i)*radius+y0);
points[points.length]=[dx,dy];
}

// get radius points
var startx=Math.sin(startAngle)*radius+x0;
var starty=Math.cos(startAngle)*radius+y0;
var lx = startx-x0;
var ly = starty-y0;
var l = Math.sqrt(lx*lx+ly*ly)
for (var i=0;i<l;i+=1)
{
var p = i/l;
var px = parseInt(x0 + lx*p);
var py = parseInt(y0 + ly*p);
points[points.length] = [px,py]
}

var startx=Math.sin(endAngle)*radius+x0;
var starty=Math.cos(endAngle)*radius+y0;
var lx = startx-x0;
var ly = starty-y0;
var l = Math.sqrt(lx*lx+ly*ly)
for (var i=0;i<l;i+=1)
{
var p = i/l;
var px = parseInt(x0 + lx*p);
var py = parseInt(y0 + ly*p);
points[points.length] = [px,py]
}


points = points.sort(compareByCol1);

// calculate lines
var lines = [];
lines[0] = [points[0],points[0]];

for (var i=1;i<points.length;i++) {
var p0 = points[i];
var p1= lines[lines.length-1][0];//left point
var p2= lines[lines.length-1][1];//right point

if (p0[1]>p1[1]){
lines[lines.length] = [p0,p0]; // new line
}else if (p0[0]<p1[0]){ // new left point of the same line
lines[lines.length-1][0] = p0;
}else if (p0[0]>p2[0]){ // new right point of the same line
lines[lines.length-1][1] = p0;
}

}

rs = [];
for (var i=lines.length-1;i>-1;i--)
rs[i] = "<span style='top:"+lines[i][0][1]+";left:"+lines[i][0][0]+";height:1;width:"+(lines[i][1][0]-lines[i][0][0]+1)+";position:absolute;font-size:1px;background-color:"+color+"'></span>";
return rs.join("");

}

function compareByCol1(a,b){
return a[1]-b[1];
}

//-->
</SCRIPT>
</body>
</html>

呵呵，用纯script也能实现画饼图，没见过吧？
...全文
38 38 打赏 收藏 转发到动态 举报
写回复
用AI写文章
38 条回复
切换为时间正序
请发表友善的回复…
发表回复
emu 2003-05-20
  • 打赏
  • 举报
 回复
呵呵，vml的版本一年前就贴过了：
http://expert.csdn.net/Expert/topic/840/840502.xml

rocsnake 2003-05-20
  • 打赏
  • 举报
 回复
用IE6看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML XMLNS:t ="urn:schemas-microsoft-com:time";
XMLNS:v="urn:schemas-microsoft-com:vml"; xmlns:MSHelp=http://msdn.microsoft.com/msHelp>

<HEAD>
<TITLE>Use keyTimes with a Values List</TITLE>

<?IMPORT namespace="t" implementation="#default#time2">
<?IMPORT namespace="v" implementation="#default#VML">
</HEAD>
<BODY>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<t:ANIMATE id="oAnim" begin="1" dur="5" fill="hold" targetElement="oOval"
attributeName="width" calcMode="linear" values="100; 300; 500"
keyTimes="0;.7; 1" />

<v:oval id="oOval" fillcolor="red" style="position:absolute;
top:200;left:50;width:100;height:100;align:center" />

</DIV>
</BODY>
</HTML>


llrock 2003-05-20
  • 打赏
  • 举报
 回复
好，强
shubo2000 2003-05-20
  • 打赏
  • 举报
 回复
强!
blues-star 2003-04-16
  • 打赏
  • 举报
 回复
faint

我用EDITPLUS的Ctrl+B，我的EP立刻死翘翘了：（
emu 2003-04-16
  • 打赏
  • 举报
 回复
打印的时候选中了“打印背景颜色和图像”没有？
nik_Amis 2003-04-16
  • 打赏
  • 举报
 回复
up
arthree 2003-04-16
  • 打赏
  • 举报
 回复
好是好，可惜画出来的东西不能打印出来。
emu_ston 2003-04-15
  • 打赏
  • 举报
 回复
今天把它优化了一下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Author" CONTENT="emu(ston)">
<META NAME="Keywords" CONTENT="javascript,chart">
<title>emu's paint without vlm</title>
<style>
.emuW{position:absolute;font-size:1px;width:1}
.emuH{position:absolute;font-size:1px;height:1}
</style>
</head>
<body>
<button onclick="testNewPie()">»­±ýͼ</button>
<div id=canvas></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var div1 = document.getElementById("canvas")
function testNewPie(){
div1.innerHTML = newPie(250,220,150,0,45,"red")+newPie(250,220,150,45,110,"blue")+newPie(250,220,150,110,250,"yellow")+newPie(250,220,150,250,360,"green");
}


var points = [];
function newPie(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+=1){
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("");
}
//-->
</SCRIPT>
</body>
</html>

这下了一倍多，好像已经无法再快了呵呵。
随风奔跑 2003-04-14
  • 打赏
  • 举报
 回复
高手好多阿。
俺也喜欢javascript了。
就是水平太差，看复杂一点点的就不大懂了。
这帖子好，俺先用装弼马翁的瓶子收了再说。
以后慢慢看。
zhjzh_zjz 2003-04-10
  • 打赏
  • 举报
 回复
非也。这两天的思考颇有心得，过量填写点东西出来大家看看。emu_ston(吃的就是没文化的亏) 还有那个瓦萨达姆金库的 还有那个 emu(**)也是你哟？？早就注意到你了！！都是同一个你，
possible_Y 2003-04-10
  • 打赏
  • 举报
 回复
先收了
多菜鸟 2003-04-10
  • 打赏
  • 举报
 回复
好多高手耶，让小弟大开眼界了，我也喜欢这个，收藏!
wangxj0600 2003-04-10
  • 打赏
  • 举报
 回复
学习
emu_ston 2003-04-08
  • 打赏
  • 举报
 回复
个人推荐前面一种，客户端压力应该会小一些。这段代码的客户端压力还是有一点大的 :-P
emu_ston 2003-04-08
  • 打赏
  • 举报
 回复
报告一个bug：
div1.innerHTML = newPie(300,300,150,-45,45,"red")+newPie(300,300,150,45,315,"green");

如果有一个扇形超过半圆并且在最后画的话有可能覆盖其他的扇形。

解决方法：

1 先画大扇形：
div1.innerHTML = newPie(300,300,150,45,315,"green")+newPie(300,300,150,-45,45,"red");

2 画的时候分层：

var z = (endAngle-startAngle>Math.PI)?-1:1;
for (var i=lines.length-1;i>-1;i--)
rs[i] = "<span style='top:"+lines[i][0][1]+";left:"+lines[i][0][0]+";height:1;width:"+(lines[i][1][0]-lines[i][0][0]+1)+";position:absolute;font-size:1px;background-color:"+color+";z-index="+z+"'></span>";



emu_ston 2003-04-07
  • 打赏
  • 举报
 回复
你可以看看代码啊 :)
心云意水 2003-04-07
  • 打赏
  • 举报
 回复
纯script?
这个……
难道算出来以后一个像素一个像素的填充？？？
walkingpoison 2003-04-07
  • 打赏
  • 举报
 回复
emu插队，呵呵
walkingpoison 2003-04-07
  • 打赏
  • 举报
 回复
楼上的楼上用的是object，不是纯script，呵呵
加载更多回复（18）
Flutter编程指南之Dart语言：移动开发语言
通过本课程学习您可以学习到Dart语言如下知识：第1章 Dart语言概述：Dart语言简介、Dart语言支持平台开发、Flutter为什么选择Dart语言。第2章 开发环境搭建：下载Dart SDK、Windows下安装Dart SDK、macOS下安装Dart SDK、Visual Studio Code开发工具、IntelliJ IDEA开发工具。第3章 完成个Dart程序：动动手写一个HelloWorld、Dart源代码文件组织结构、Visual Studio Code调试Dart代码、IntelliJ IDEA调试Dart代码。第4章 Dart语法基础：标识符、关键字、变量、常量、注释、库。第5章 Dart数据类型：数值类型、字符串、数据类型相互转换、布尔类型和枚举类型第6章 运算符：算术运算符、算术赋值运算符、关系运算符、逻辑运算符、位运算符、条件运算符、类型检查运算符。第7章 控制语句：分支语句、循环语句、跳转语句。第8章 函数：函数声明、可选参数、头等函数（first-class function）、匿名函数。第9章 类：类声明、getter和setter访问器、构造函数、静态变量和静态方法、级联符号。第10章 继承与多态：Dart中的继承实现、调用父类构造函数、成员变量的覆盖（Override）、方法的覆盖（Override）、多态、混入（Mixins）。第11章 抽象类与接口：抽象类、接口、Dart中隐式接口、实现接口。第12章 数据容器：List容器、Set容器、Map容器、泛型。第13章 异常处理：捕获异常、try-on捕获异常、try-catch捕获异常、try-on-catch捕获异常、使用finally代码块、手动抛出异常、自定义异常类。第14章 异步编程：Dart异步处理机制、案例：同步函数实现读取文件、案例：异步函数实现读取文件、Future对象。  
Cannot find the class file for java.lang.Object. Fix the build path then try building this project
完整错误信息：The project was not built since its build path is incomplete. Cannot find the class file for java.lang.Object. Fix the build path then try building this project。 错误发生场景：今天重装Myeclipse，然后重新导入以前的
pycharm安装第三方库：Try to run this command from the system terminal. Make sure that you use the问题，亲测已解决
解决pycharm安装第三方库出现的try to run this command from the system terminal......的报错
安装numpy时出现Try to run this command from the system terminal. Make sure that you use the correct versi
问题描述： 在pycharm上安装第三方库numpy出现Try to run this command from the system terminal. Make sure that you use the correct version of ‘pip’ installed for your Python interpreter located at ‘D:python.exe’.错误 解决方...
New package not yet registered with the system 解决方法

[2011-04-08 10:12:48 - Snake] New package not yet registered with the system. Waiting 3 seconds before next attempt.
 
 
解决方案： Try this Project->Clean in eclipse, and the deploy it again.
JavaScript

87,907

社区成员

224,614

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章