87,910
社区成员
发帖
与我相关
我的任务
分享
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload = "init(evt)">
<script type="text/javascript" xlink:href="test.js"></script>
</svg>
var data = {
facebook:{
total:1500,
titan:700,
fishbowl:500,
athena:400,
bossv:500,
dream:600
},
mixi:{
total:1000,
titan:500,
fishbowl:400,
athena:500,
bossv:500,
dream:600
},
kaixin:{
total:1000,
titan:300,
fishbowl:400,
athena:400,
bossv:400,
dream:400
},
renren:{
total:900,
titan:300,
fishbowl:400,
athena:600,
bossv:600,
dream:400
},
netlog:{
total:1000,
titan:300,
fishbowl:400,
athena:500,
bossv:500,
dream:400
},
minik:{
total:1100,
titan:300,
fishbowl:400,
athena:500,
bossv:300,
dream:400
},
daum:{
total:1400,
titan:300,
fishbowl:400,
athena:600,
bossv:500,
dream:400
},
tencent:{
total:1200,
titan:300,
fishbowl:400,
athena:560,
bossv:600,
dream:400
}
};
var color = {
facebook:{
stroke: "red",
filledColor: "red"
},
mixi:{
stroke: "#FF9FFF",
filledColor: "#FF9FFF"
},
kaixin:{
stroke: "#FFBF02",
filledColor: "#FFBF02"
},
renren:{
stroke: "#836FFF",
filledColor: "#836FFF"
},
netlog:{
stroke: "#48D1CC",
filledColor: "#48D1CC"
},
minik:{
stroke: "#00CED1",
filledColor: "#00CED1"
},
daum:{
stroke: "#008B00",
filledColor: "#008B00"
},
tencent:{
stroke: "#A4D3EE",
filledColor: "#A4D3EE"
}
};
var svgns = "http://www.w3.org/2000/svg";
/*
*根据相应的支付额,获取应该显示的圆的半径大小
*/
function getRadius(payment){
var pay = parseInt(payment);
return parseInt(pay/30);//待修改
}
function getMax(json){
var max = 0;
for( var val in json ){
if(val > max){
max = val;
}
}
return max;
}
function getXY(preXY,space,radius,maxRadius){
return preXY + space * 2 + radius + maxRadius;
}
/* draw svg cicle and append it to the svgDom */
function drawCircle(evt,rx,ry,radius,stroke,filledColor){
if ( window.svgDocument == null ){
svgDocument = evt.target.ownerDocument;
}
var shape = svgDocument.createElementNS(svgns, "circle");
shape.setAttributeNS(null,"cx",rx);
shape.setAttributeNS(null,"cy",ry);
shape.setAttributeNS(null,"r",radius);
shape.setAttributeNS(null,"stroke",stroke);
shape.setAttributeNS(null,"fill",filledColor);
svgDocument.documentElement.appendChild(shape);
}
/* draw svg line and append it to the svgDom */
function drawLine(evt,srcX,srcY,disX,disY,stroke){
if ( window.svgDocument == null ){
svgDocument = evt.target.ownerDocument;
}
var shape = svgDocument.createElementNS(svgns, "line");
shape.setAttributeNS(null,"x1",srcX);
shape.setAttributeNS(null,"y1",srcY);
shape.setAttributeNS(null,"x2",disX);
shape.setAttributeNS(null,"y2",disY);
shape.setAttributeNS(null,"stroke",stroke);
svgDocument.documentElement.appendChild(shape);
}
/* draw svg textNode and append it to the svgDom */
function drawText(evt,rx,ry,radius,content){
var fontSize = getFontSize(radius);
if ( window.svgDocument == null ){
svgDocument = evt.target.ownerDocument;
}
var shape = svgDocument.createElementNS(svgns, "text");
shape.setAttributeNS(null,"x",rx);
shape.setAttributeNS(null,"y",ry);
shape.setAttributeNS(null,"font-size",fontSize);
shape.textContent = content;
svgDocument.documentElement.appendChild(shape);
}
/*
* 根据半径和最大外围半径以及空隙space。求出可用的坐标。为均匀分配,这里采用平均分配的方式。
* result = [{"x":10,y:20},{"x":40,y:60},{"x":70,y:80},{"x":40,y:60}];
* */
function getCorFromRadius(rx,ry,radius,space,maxRadius,sum){
var result = new Array();
var r = radius + space + maxRadius;//外部圆的最大半径
var x0 = rx;
var y0 = ry - r;
result.push({"x":x0,"y":y0});
var step = (360/sum) * Math.PI /180;//弧度
var start = step;
for(var i = 0;i < sum - 1;i++){
var rxi = parseInt(rx + r * Math.sin(start));
var ryi = parseInt(ry - r * Math.cos(start));
result.push({"x":rxi,"y":ryi});
start += step;
}
return result;
}
/*
*根据半径获取相应的字体大小,待优化。
* */
function getFontSize(radius){
return parseInt(radius/1.5);
}
/* draw the total platform Map circly */
function drawPlatformCircle(evt,platCount,gameCount){
var rx = 900;
var ry = 450;
var radius = 200;
var space = 30;
var max = 70;
var res = getCorFromRadius(rx, ry, radius, space, max, platCount);
var i = 0;
for(var platform in data){
var rx0 = res[i].x;
var ry0 = res[i].y;
var max = getMax(data[platform]);
var stroke = color[platform].stroke;
var filledColor = color[platform].filledColor;
var max = getMax(data[platform]);
var radius = getRadius(data[platform].total);//平台圆半径
drawCircle(evt,rx0, ry0, radius, stroke, filledColor);
var j = 0;
for (var obj in data[platform]) {
if (obj != "total") {
var rest = getCorFromRadius(rx0, ry0, radius, space, max, gameCount);
var outerX = rest[j].x;
var outerY = rest[j].y;
var outerRadius = getRadius(data[platform][obj]);
drawCircle(evt,outerX, outerY, outerRadius, stroke, filledColor);
drawLine(evt,rx0,ry0,outerX,outerY,stroke);
drawText(evt,outerX - outerRadius/2, outerY, outerRadius, obj);
j++;
}
}
drawText(evt,rx0 - radius/2, ry0, radius, platform);
i++;
}
}
/* draw the total platform Map in line */
function drawLinePlatform(evt){
var rightIndex = 80;
var top = 50;
var space = 40;
var count = 0;
var maxTotalGame = 5;
for( var platform in data ){
count ++;
var stroke = color[platform].stroke;
var filledColor = color[platform].filledColor;
var max = getMax(data[platform]);
var radius = getRadius(data[platform].total);//平台圆半径
var rx = getXY(rightIndex,space,radius,max);//平台圆x轴坐标
var ry = getXY(top,space,radius,max);//平台圆y轴坐标
drawCircle(evt,rx,ry,radius,stroke,filledColor);
var j = 0;
for(var obj in data[platform]){
if(obj != "total"){
var res = getCorFromRadius(rx,ry,radius,space,max,maxTotalGame);
var outerX = res[j].x;
var outerY = res[j].y;
var outerRadius = getRadius(data[platform][obj]);
drawLine(evt,rx,ry,outerX,outerY,stroke);
drawCircle(evt,outerX,outerY,outerRadius,stroke,filledColor);
drawText(evt,outerX - outerRadius/2,outerY,outerRadius,obj);
j++;
}
}
drawText(evt,rx - radius/2,ry,radius,platform);
rightIndex = (rx + radius + space * 2 + max);
if(count % 5 == 0){
rightIndex = 120;
top = (ry + radius + space + max)+50;//TODO:这个有问题,没有考虑本身的高度
}
}
}
function init(evt){
drawPlatformCircle(evt,8,5);
}