我需要帮助为我使用raphael.js修改的圆环图脚本添加标记.除了动态生成三角形标记的方法外,我已经准备好了大部分内容.
JSFiddle:http://jsfiddle.net/aP7MK/73/
function donutChart(total,goal,avg){ var paper = Raphael("canvas",400,400); paper.customAttributes.arc = function (xloc,yloc,value,total,R) { var alpha = 360 / total * value,a = (90 - alpha) * Math.PI / 180,x = xloc + R * Math.cos(a),y = yloc - R * Math.sin(a),path; if (total == value) { path = [ ["M",xloc,yloc - R],["A",R,1,xloc - 0.01,yloc - R] ]; } else { path = [ ["M",+(alpha > 180),x,y] ]; } return { path: path }; }; var backCircle = paper.circle(100,100,40).attr({ "stroke": "#7BC2E5","stroke-width": 14 }); var theArc = paper.path().attr({ "stroke": "#f5f5f5","stroke-width": 14,arc: [100,40] }); //event fired on each animation frame eve.on("raphael.anim.frame.*",onAnimate); //text in the middle theText = paper.text(100,"0%").attr({ "font-size": 18,"fill": "#f5f5f5","font-weight": "bold" }); //the animated arc theArc.rotate(0,100).animate({ arc: [100,((total/goal) * 100),40] },1900); //on each animation frame we change the text in the middle function onAnimate() { var howMuch = theArc.attr("arc"); theText.attr("text",Math.floor(howMuch[2]) + "%"); } } donutChart(80,140,40);
这是我最终要创建的内容:
我并不担心样式,只需要帮助标记元素,这将表示传递给donutChart函数的avg参数位于图表中的位置.
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。