मैं 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); 

यहाँ है कि मैं क्या अंततः बनाने के लिए कोशिश कर रहा हूँ जो बताएगा कि औसत तर्क को donutChart फ़ंक्शन पर पास किया जा रहा है, चार्ट के भीतर स्थित है।

Answer 1

रूप @Ian कहा कि तुम path उपयोग कर सकते हैं त्रिकोण आकर्षित करने के लिए:

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

path (अपने आदेशों) का उपयोग कर के बारे में docs देखें।

तो फिर तुम बारी बारी से/(फिर से के रूप में @Ian कहा) अनुवाद करने की आवश्यकता है, लेकिन एसवीजी आप यहाँ rotate विधि है जो रोटेशन की न केवल कोण लेता है, लेकिन यह भी चारों ओर घूमने बिंदु के निर्देशांक प्रदान करने में मदद करता है (यह आप के लिए निर्देशांक तब्दील)

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

यह ध्यान देने योग्य एकमात्र चीज यह है कि आपको पिछले और वर्तमान प्रतिशत के अंतर की आवश्यकता है।

काम कर fiddle