HTML5饼状图代码
<!DOCTYPE html><html lang="en" xmlns="http://www.
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
var data = [
{ numb: 4.85, color: '#00ff00', text: 'IE6.0' },
{ numb: 4.23, color: '#99ff44', text: 'IE7.0' },
{ numb: 23.88, color: '#44ff99', text: 'IE8.0' },
{ numb: 6.94, color: '#aaffaa', text: 'IE9.0' },
{ numb: 34.36, color: '#0000ff', text: 'Chome' },
{ numb: 4.77, color: '#ff1100', text: '搜狗' },
{ numb: 2.71, color: '#ff6600', text: '猎豹' },
{ numb: 2.28, color: '#ffbb00', text: '2345' },
{ numb: 13.22, color: '#020302', text: '其他' }
];
function pieChart(data, width, height, cx, cy, r, lx, ly) {
/// <signature>
/// <summary>绘制饼状图</summary>
/// <param name="data">数据源，如：{numb:4.85,color:'#00ff00',name:'IE6.0'}的对象数组</param>
/// <param name="width">图像的宽，单位：像素</param>
/// <param name="height">图像的高，单位：像素</param>
/// <param name="cx">饼状图圆心的x坐标</param>
/// <param name="cy">饼状图圆心的y坐标</param>
/// <param name="r">饼状图圆的半径</param>
/// <param name="lx">饼状图左上角的x坐标</param>
/// <param name="ly">饼状图左上角的y坐标</param>
/// </signature>
var i = 0, len = data.length,
// svg元素的XML命名空间
svgns = 'http://www.',
// 饼状图总大小 和 分片大小数组
total = 0, angles = [],
// 记录分片绘制的起始和终止点
startAngle = 0, endAngle = 0,
// 分片绘制的起始点和终止点的坐标
x1, x2, y1, y2,
// 各个标签的变量
chart, path, icon, label,
// 其他变量
big, d;
// 创建一个svg元素，同时指定像素大小和用户坐标
chart = document.createElementNS(svgns, 'svg:svg');
chart.setAttribute('width', width);
chart.setAttribute('height', height);
chart.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
// 累加data.numb的值，获得饼状图的大小
for (i = 0; i < len; i++) {
total += data[i].numb;
}
// 计算出饼状图每个分片的大小，其中角度以弧度制计算
for (i = 0; i < len; i++) {
angles[i] = data[i].numb / total * Math.PI * 2;
}
// 遍历饼状图的每个分片
for (i = 0; i < len; i++) {
endAngle = startAngle + angles[i];
x1 = cx + r * Math.sin(startAngle);
y1 = cy - r * Math.cos(startAngle);
x2 = cx + r * Math.sin(endAngle);
y2 = cy - r * Math.cos(endAngle);
big = 0;
angles[i] > Math.PI && (big = 1);
// 使用<svg:path>元素来描述楔
// 要注意的是，使用createElementNS()来创建该元素
path = document.createElementNS(svgns, "path");
// 下面的字符串包含路径的详细信息
// M:从圆心开始；L:画一条到(x1,y1)的线段，A:画一条半径为r的弧，弧的详细信息，到(x2,y2)结束；Z:当前路径到(cx,cy)结束
d = 'M ' + cx + ',' + cy + ' L ' + x1 + ',' + y1 + ' A ' + r + ',' + r + ' 0 ' + big + ' 1 ' + x2 + ',' + y2 + ' Z';
// 设置<svg:path>元素的属性
path.setAttribute("d", d); // 设置路径
path.setAttribute("fill", data[i].color); // 设置楔的颜色
path.setAttribute("stroke", '#fff'); // 楔的外边框颜色
path.setAttribute("stroke-width", '1'); // 楔外边框宽度
chart.appendChild(path);
// 当前楔的结束就是下一个楔的开始
startAngle = endAngle;
// 绘制一些相应的小方块来表示图例
icon = document.createElementNS(svgns, 'rect');
icon.setAttribute('x', lx); // 定位小方块
icon.setAttribute('y', ly + 30 * i);
icon.setAttribute('width', 20); // 设置小方块大小
icon.setAttribute('height', 20);
icon.setAttribute('fill', data[i].color); // 填充小方块的颜色和对应的楔的颜色相同
icon.setAttribute('stroke', '#fff'); // 子外边框的颜色也相同
icon.setAttribute('stroke-width', '1');
chart.appendChild(icon);
//在小方块右侧添加文本标签
label = document.createElementNS(svgns, 'text');
label.setAttribute('x', lx + 30); // 定位文本标签
label.setAttribute('y', ly + 30 * i + 18);
label.setAttribute('font-family', 'sans-serif'); // 文本样式属性还可以通过css来设置
label.setAttribute('font-size', '16');
label.appendChild(document.createTextNode(data[i].text + ' ： ' + data[i].numb + '%'));
chart.appendChild(label);
}
return chart;
};
document.body.appendChild(pieChart(data, 640, 400, 200, 200, 150, 400, 100));
</script>
</body>
</html>
看不懂
