如何创建部分圆/弧？

Question

从strapfork.com附加此屏幕抓取。 （如果您在strapfork.com页面上略微滚动，在统计数据中，您会看到圆形的颜色部分与数字成比例的圆弧。）如何构建这样的小部件？

他们正在使用某种JavaScript似乎，但我不知道如何复制相同。

Answer 1

同Spudley的评论：拉斐尔做这项工作，它的作品甚至在旧的浏览器（IE7 ...）

三角和拉斐尔Path对象的一点是你所需要的。尝试下面的代码作为示例：

HTML：

<div id="mytest"></div> 

JS：

var paper = Raphael('mytest', 500, 400); 

var background = paper.rect(0, 0, 500, 400, 0); 
background.attr("fill", "#ffffff").attr("stroke", "none"); 

var centerX = 200, centerY = 200, Radius = 100, percent = 95; 
// change the percent value between 0 and 100 

var startArcX = centerX + Radius * Math.cos(Math.PI/2); 
var startArcY = centerY - Radius * Math.sin(Math.PI/2); 

var endArcX = Math.round(centerX + Radius * Math.cos(Math.PI * (0.5 - 0.02 * percent))); 
var endArcY = Math.round(centerY - Radius * Math.sin(Math.PI * (0.5 - 0.02 * percent))); 

var bigArc = (percent>50)?1:0; 

var directionDrawing = 1; 

var stringPath = 'M' + startArcX.toString() + ',' + startArcY.toString() 
       + ' A' + Radius.toString() + ',' + Radius.toString() 
       + ' 0 ' 
       + bigArc.toString() + ',' + directionDrawing.toString() + ' ' 
       + endArcX.toString() + ',' + endArcY.toString(); 



var path1 = paper.path(stringPath); 
path1.attr("stroke", "#ff0000").attr("stroke-width", "20px"); 

与画布元件，SVG，或组合