39,083
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
从此程序员 2014-08-28
- 打赏
- 举报
canvas这样可以实现的，热心的楼主
jwl_yifeng 2014-01-27
- 打赏
- 举报
ext
很容易就实现了啊
allali 2014-01-26
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<svg height="500" width="500">
<!--<circle id="circle" cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="white"/>-->
<polygon id="polygon1" points="0,0 0,0 0,0" style="fill:white;stroke:black;stroke-width:1" />
<polygon id="polygon2" points="0,0 0,0 0,0" style="fill:white;stroke:black;stroke-width:1" />
<polygon id="polygon3" points="0,0 0,0 0,0" style="fill:white;stroke:black;stroke-width:1" />
<polygon id="polygon4" points="0,0 0,0 0,0" style="fill:white;stroke:black;stroke-width:1" />
<polygon id="polygon5" points="0,0 0,0 0,0" style="fill:white;stroke:black;stroke-width:1" />
<line id="line1" x1="0" y1="0" x2="200" y2="200" style="stroke:silver;stroke-width:1" />
<line id="line2" x1="0" y1="0" x2="200" y2="200" style="stroke:silver;stroke-width:1" />
<line id="line3" x1="0" y1="0" x2="200" y2="200" style="stroke:silver;stroke-width:1" />
</svg>
<script>
function setPol(){
var x=200,y=10,l=200,_x,_y;
var h = Math.sqrt(Math.pow(l,2) - Math.pow(l/2,2));
$("#polygon1").attr("points",x + "," + y + " " + (x+(l/2)) +"," + (y+h) + " " + (x-(l/2)) +"," + (y+h));
var y0 = (3*y + 2*h)/3;
$("#line1").attr("x1",x).attr("y1",y0).attr("x2",x).attr("y2",y);
$("#line2").attr("x1",x).attr("y1",y0).attr("x2",x+(l/2)).attr("y2",y+h);
$("#line3").attr("x1",x).attr("y1",y0).attr("x2",x-(l/2)).attr("y2",y+h);
var r = y0 - y;
// $("#circle").attr("cx",x).attr("cy",y0).attr("r",r);
y += 10;
r -= 10;
_x = r*Math.cos(Math.PI/6);
_y = r*Math.sin(Math.PI/6);
$("#polygon2").attr("points",x + "," + y + " " + (x+_x) +"," + (y+r+_y) + " " + (x-_x) +"," + (y+r+_y));
y += 10;
r -= 10;
_x = r*Math.cos(Math.PI/6);
_y = r*Math.sin(Math.PI/6);
$("#polygon3").attr("points",x + "," + y + " " + (x+_x) +"," + (y+r+_y) + " " + (x-_x) +"," + (y+r+_y));
y += 10;
r -= 10;
_x = r*Math.cos(Math.PI/6);
_y = r*Math.sin(Math.PI/6);
$("#polygon4").attr("points",x + "," + y + " " + (x+_x) +"," + (y+r+_y) + " " + (x-_x) +"," + (y+r+_y));
y += 10;
r -= 10;
_x = r*Math.cos(Math.PI/6);
_y = r*Math.sin(Math.PI/6);
$("#polygon5").attr("points",x + "," + y + " " + (x+_x) +"," + (y+r+_y) + " " + (x-_x) +"," + (y+r+_y));
}
setPol();
</script>
</body>
</html>
wg5945 2014-01-26
- 打赏
- 举报
jqchart研究过，里面好像没有这样的图形？[/quote]
它上面写的例子不就能画出来么~~
你想要专门用来画雷达图的？
我以前用过个，不过是日文的，看看汉字应该能明白吧~~用法很简单~~
http://www.html5.jp/library/graph_radar.html
lyp_2008001 2014-01-26
- 打赏
- 举报
灰常感谢大家。利用html5 的svg，把我要的效果画出来了。
似梦飞花 2014-01-25
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//[[{x,y},{x,y},{x,y},{color:}],[{x,y},{x,y},{x,y},{color:}]]
function test(arr){
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
for(var i=0,len=arr.length;i<len;i++){
var obj=arr[i];
context.beginPath();
context.moveTo(obj[0].x,obj[0].y);
context.lineTo(obj[1].x,obj[1].y);
context.lineTo(obj[2].x,obj[2].y);
context.closePath();
if(obj[3]){
context.fillStyle=obj[3].color;
context.fill();
}else{
context.stroke();
}
}
}
window.onload=function(){
test([
[{'x':200,'y':10},{'x':380,'y':380},{'x':20,'y':360}],
[{'x':200,'y':40},{'x':360,'y':350},{'x':40,'y':330}],
[{'x':200,'y':70},{'x':330,'y':320},{'x':70,'y':300},{'color':'rgba(100,100,150,1)'}],
[{'x':200,'y':100},{'x':300,'y':290},{'x':100,'y':270}]
])
}
</script>
</head>
<body>
<canvas id='canvas' width=400 height=400></canvas>
</body>
</html>
？？
似梦飞花 2014-01-25
- 打赏
- 举报
canvas画不行吗？
lyp_2008001 2014-01-24
- 打赏
- 举报
jqchart研究过，里面好像没有这样的图形？
lyp_2008001 2014-01-24
- 打赏
- 举报
jqchart研究过，里面好像没有这样的图形？
wg5945 2014-01-24
- 打赏
- 举报
还是使用插件吧~~
方便快捷~~
http://blog.csdn.net/leixiaohua1020/article/details/12650055
