Текст внутри круга с Рафаэлем

Question

Я пытаюсь повторить следующее изображение с Рафаэлем:

До сих пор мне удалось только получить круг работает. Как получить слабый серый контур (который показывает остаток) и текст в круге.

var score = 883 
var amount = score/1000 * 100; 

var archtype = Raphael("canvas", 200, 100); 
archtype.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, R, 0, 1, 1, xloc - 0.01, yloc - R] 
     ]; 
    } else { 
     path = [ 
      ["M", xloc, yloc - R], 
      ["A", R, R, 0, +(alpha > 180), 1, x, y] 
     ]; 
    } 
    return { 
     path: path 
    }; 
}; 

var my_arc = archtype.path().attr({ 
    "stroke": "#00BB7B", 
    "stroke-width": 7, 
    arc: [50, 50, 0, 100, 30] 
}); 

my_arc.animate({ 
    arc: [50, 50, amount, 100, 30] 
}, 1500, "bounce"); 

Jsfiddle здесь: http://jsfiddle.net/1eh7dmgu/

Answer 1

1) Баланс вы можете показать просто положить его под зеленой дугой закрыта серая дуга:

var remainder = archtype.path().attr({ 
    "stroke": "#eeeeee", 
    "stroke-width": 7, 
    arc: [50, 50, 100, 100, 30] 
}); 

2) Для анимации текста счетчика может также использовать руководство атрибут:

archtype.customAttributes.counter = function (counter) { 
    return { text: counter, counter: counter } 
} 

[http://jsfiddle.net/mwvLc0kb/]