如何创建部分圆/弧？

Question

使用来自strapfork.com的屏幕抓取附加。 （如果您在strapfork.com页面上稍微向下滚动，在统计数据中，您将看到圆弧，其中彩色部分与数字成比例。）如何构建这样的小部件？

他们似乎正在使用某种javascript但是，我无法弄清楚如何复制它们。

Answer 1

与Spudley的评论相同：Raphael完成了这项工作，即使在较旧的浏览器上也能正常工作（IE7 ......）

您需要一点三角函数和Raphael 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");