怎么⽤html代码画出饼状图,HTML5饼状图代码
HTML5饼状图代码
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) {
///
/// 绘制饼状图
/// 数据源，如：{numb:4.85,color:'#00ff00',name:'IE6.0'}的对象数组
/// 图像的宽，单位：像素
/
html如何下载// 图像的⾼，单位：像素
/// 饼状图圆⼼的x坐标
/// 饼状图圆⼼的y坐标
/// 饼状图圆的半径
/// 饼状图左上⾓的x坐标
/// 饼状图左上⾓的y坐标
///
var i = 0, len = data.length,
// svg元素的XML命名空间
svgns = 'www.',
// 饼状图总⼤⼩ 和 分⽚⼤⼩数组
total = 0, angles = [],
// 记录分⽚绘制的起始和终⽌点
startAngle = 0, endAngle = 0,
// 分⽚绘制的起始点和终⽌点的坐标
x1, x2, y1, y2,
// 各个标签的变量
chart, path, icon, label,
// 其他变量
big, d;
// 创建⼀个svg元素，同时指定像素⼤⼩和⽤户坐标
chart = ateElementNS(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 * s(startAngle);
x2 = cx + r * Math.sin(endAngle);
y2 = cy - r * s(endAngle);
big = 0;
angles[i] > Math.PI && (big = 1);
// 使⽤元素来描述楔
// 要注意的是，使⽤createElementNS()来创建该元素
path = ateElementNS(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';
// 设置元素的属性
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 = ateElementNS(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 = ateElementNS(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.ateTextNode(data[i].text + ' ： ' + data[i].numb + '%'));
chart.appendChild(label);
}
return chart;
};
document.body.appendChild(pieChart(data, 640, 400, 200, 200, 150, 400, 100));

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。