用Raphael画圆形分散图
此文参照了Raphael的官网例子以及"纯属偶然_黄勇"大大的JS正余弦计算方式:http://www.cnblogs.com/huangyong8585/p/3142515.html
以下是实现代码：
<html>
<head>
<title>用Raphael画圆型分散图</title>
<script>
window.onload = function () {
var r = Raphael("holder", 640, 480), angle = 0,index = 0;
var addr = [];
addr.push(r.circle(320, 240, 5).attr({fill: "none", "stroke-width": 10}));
while (angle < 360) {
var color = Raphael.getColor();
var text = '未知';
(function (t, c,text) {
var shape = r.text(320, 30, text);
shape.attr({stroke: c, fill: c, transform: t, "fill-opacity": .4});
shape.id = text;
shape.dblclick(function () {alert(this.id); });
addr.push(shape);
})("r" + angle + " 320 240", color, text);
index ++;
angle += 40;
}
Raphael.getColor.reset();
var s = r.set();
// 40 为360/9
// 320 为x轴圆心坐标 240 为y轴圆心坐标
for(var j = 0; j < 9; j ++){
var hudu = (2 * Math.PI/360) * 40 * j;
var x = 320 + Math.sin(hudu) * 210;
var y = 240 - Math.cos(hudu) * 210;
s.push(r.path("M320,240L" + x + "," + y + "").attr({fill: "none", "stroke-width": 2}));
}
s.attr({stroke: Raphael.getColor()});
};
</script>
</head>
<body>
<div id="holder"></div>
</body>
</html>
下面是实现效果：
