Wie kann ich einem mit Raphael.js erstellten Donut-Diagramm einen Marker hinzufügen?

Question

Ich brauche Hilfe beim Hinzufügen eines Markers zu diesem Donut-Diagramm-Skript, das ich mit raphael.js geändert habe. Ich habe fast alles bereit, außer dass ich dynamisch einen dreieckigen Marker erzeugen kann.

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); 

Hier ist, was ich versuche schließlich zu erstellen:

Ich bin nicht besorgt über das Styling, brauchen nur mit dem Markierungselement helfen, was bedeutet, dass das avg-Argument, das an die donutChart-Funktion übergeben wird, innerhalb des Diagramms liegt.

Answer 1

Wie @Ian gesagt, Sie path Dreieck zeichnen verwenden können:

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

die docs Siehe über die Verwendung von path (seine Befehle).

Dann müssen Sie drehen/translate (wieder als @Ian sagte), aber SVG hilft hier Sie rotate Verfahren bereitzustellen, die nicht nur Drehwinkel nimmt aber auch Koordinaten von Punkt zu drehen, um (es übersetzt Koordinaten für Sie)

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

Das einzige, was hier zu beachten ist, ist, dass Sie einen Unterschied zwischen dem vorherigen und aktuellen Prozentsatz benötigen.

Die Arbeits fiddle