javascript+SVG画饼图

javascript+SVG画饼图

将26个英文字母分成6组,运用javascript+SVG画出一个英文单词中各组中含有字母的饼图,具体要求如下图,分不是问题,请各位大哥帮忙,最好有注解。


作佳 1年前 已收到1个回答 举报

whb19830523 幼苗

共回答了16个问题采纳率:87.5% 举报

createPieChart = function(document)
{
x09var NewSVGElement = function(Q,A)//生成SVG元素
x09{
x09x09var F;
x09x09Q = 'string' === typeof Q ? document.createElementNS('http' + '://www.***.org/2000/svg',Q) : Q
x09x09for (F in A) F.indexOf('xlink:') ?
x09x09x09Q.setAttribute(F,A[F]) ://不是xlink命名空间的属性
x09x09x09Q.setAttributeNS('http' + '://www.***.org/1999/xlink',F.substr(6),A[F])//是xlink命名空间的属性
x09x09return Q
x09},Group = {},T = ['ABCD','EFGH','IJKL','MNOP','QRSTU','VWXYZ'],F;
x09for (F = T.length;F--;)//向Group中初始化bins的数据
x09x09for (;T[F];T[F] = T[F].substr(1))
x09x09x09Group[T[F].charAt(0)] = F
x09return function(SVG,Q)
x09{
x09x09varx09Count = Array(6),//存放bins计数
x09x09x09G,//
x09x09x09Radius = SVG.getAttribute('height') / 2,//存放半径
x09x09x09Length,//存放字符长度
x09x09x09R = 0,//存储当前角度
x09x09x09S = Math.sin,
x09x09x09C = Math.cos,//单纯的做个本地副本, 益处是角度计算多的时候方便
x09x09x09X,Y,//坐标计算缓存, 用於提高效能
x09x09x09F;//临时变量|计数器变量
x09x09Q = Q.toUpperCase().split('')//转化成大写後单字分隔
x09x09Length = Q.length
x09x09for (;Q.length;Q.shift())//bins计数
x09x09{
x09x09x09F = Group[Q[0]]
x09x09x09Count[F] = (Count[F] || 0) + 1
x09x09}
x09x09SVG.appendChild(G = NewSVGElement('g',
x09x09{
x09x09x09transform : 'translate(' + Radius + ' ' + Radius + ')',//通过坐标变换将绘制设置为原点在 !画布中心! , 向右为x增, 向下为y增
x09x09x09style : 'fill:gray;stroke:black'//默认填充样式
x09x09}))
x09x09X = Radius
x09x09Y = 0
x09x09for (F = 0;F < Count.length;++F)
x09x09{
x09x09x09Count[F] && (R += 2 * Math.PI * Count[F] / Length)//模拟旋转
x09x09x09G.appendChild(NewSVGElement('path',
x09x09x09{
x09x09x09x09d : 'M0 0 ' + X + ' ' + Y + 'A' + Radius + ' ' + Radius + ' 0 0 1 ' + (X = Radius * C(R)) + ' ' + (Y = Radius * S(R))
x09x09x09x09//A指令的用法一句两句说不清楚, 还是看文档吧
x09x09x09}))
x09x09}
x09x09return SVG
x09}
}(document)

1年前

2
可能相似的问题
Copyright © 2024 YULUCN.COM - 雨露学习互助 - 16 q. 0.019 s. - webmaster@yulucn.com