技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > html/html5 > 正文

html5 svg画图 三角形雷达图

来源: 技术CTO 阅读:

\

各位求助一下,如何通过html5 的svg来画上面图。

还是使用插件吧~~

方便快捷~~

引用 楼主 lyp_2008001 的回复:
\

各位求助一下,如何通过html5 的svg来画上面图。


jqchart研究过,里面好像没有这样的图形?
引用 1 楼 wg5945 的回复:
还是使用插件吧~~

方便快捷~~



jqchart研究过,里面好像没有这样的图形?
canvas画不行吗?
<!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>
??
引用 3 楼 lyp_2008001 的回复:
Quote: 引用 1 楼 wg5945 的回复:

还是使用插件吧~~

方便快捷~~



jqchart研究过,里面好像没有这样的图形?


它上面写的例子不就能画出来么~~

你想要专门用来画雷达图的?

我以前用过个,不过是日文的,看看汉字应该能明白吧~~用法很简单~~


<!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>
灰常感谢大家。利用html5 的svg,把我要的效果画出来了。
ext
很容易就实现了啊

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^