Как добавить маркер в диаграмму пончика, созданную с помощью Raphael.js?

Question

Мне нужна помощь, добавив маркер в этот скрипт диаграммы пончика, который я изменил, используя 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, 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 backCircle = paper.circle(100, 100, 40).attr({ 
     "stroke": "#7BC2E5", 
      "stroke-width": 14 
    }); 

    var theArc = paper.path().attr({ 
     "stroke": "#f5f5f5", 
      "stroke-width": 14, 
     arc: [100, 100, 0, 100, 40] 
    }); 


    //event fired on each animation frame 
    eve.on("raphael.anim.frame.*", onAnimate); 

    //text in the middle 
    theText = paper.text(100, 100, "0%").attr({ 
     "font-size": 18, 
      "fill": "#f5f5f5", 
      "font-weight": "bold" 
    }); 

    //the animated arc 
    theArc.rotate(0, 100, 100).animate({ 
     arc: [100, 100, ((total/goal) * 100), 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); 

Вот то, что я в конце концов пытается создать:

Я не беспокоюсь о стилизации, нужно просто помочь с элементом маркера, который будет обозначать, где аргумент avg, передаваемый функции donutChart, лежит внутри диаграммы.

Answer 1

Как @Ian сказал, что вы можете использовать path нарисовать треугольник:

// triangle 
var tri = paper.path("M100 50 L90 40 L110 40 L100 50 Z"); 

Смотрите docs об использовании path (его команды).

Затем вам нужно повернуть/перевести (опять же, как сказал @Ian), но SVG помогает здесь обеспечивая rotate метод, который принимает не только угол поворота, но и координаты точки, чтобы повернуть вокруг (он переводит координаты для вас)

tri.rotate((howMuch[2] - prev_percent) * 3.6, 100, 100); 

Единственное, что нужно отметить, это то, что вам нужно разницу в предыдущем и текущем процентах.

Рабочая fiddle