Chart.js v2.0 में लेबल पर ऑनक्लिक ईवेंट कैसे जोड़ें?

Question

चार्टज़ 2.0 में "लेबल" तत्व पर ऑनक्लिक हैंडल जोड़ने के लिए एक विधि के लिए खोज रहे हैं Char.js V2.0 RadarChart में किसी भी लेबल विशेषता पर क्लिक करते समय नीचे विधि का उपयोग करते हुए console.log में "अपरिभाषित" वापस आ जाएगा। ।

var data = { 
    // below line is the labels 
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], 
    datasets: [ 
     { 
      label: "My First dataset", //this only shows as legend, not label. 

      backgroundColor: "rgba(179,181,198,0.2)", 
      borderColor: "rgba(179,181,198,1)", 
      pointBackgroundColor: "rgba(179,181,198,1)", 
      pointBorderColor: "#fff", 
      pointHoverBackgroundColor: "#fff", 
      pointHoverBorderColor: "rgba(179,181,198,1)", 
      data: [65, 59, 90, 81, 56, 55, 40] 
     }, 
     .... 

//Below is how to OnClick on chart points in chart.js V2, 
 
//However, it didn't apply to labels, will return "undifined" . 
 
$('#ChartV2').click(function(e) { 
 
       var activePoints = myRadarChart.getElementsAtEvent(e);     
 
       var firstPoint = activePoints[0]; 
 
       console.log(firstPoint); 
 
       if (firstPoint !== undefined){ 
 
        alert(firstPoint._index);       
 
       } 
 
});

Answer 1

getElementsAtEvent चेकों केवल मुख्य चार्ट के तत्वों (बार, अंक, क्षेत्रों ...)। यदि आप लेबल पर भी विचार करना चाहते हैं, तो आपको लेबल के लिए कार्यक्षमता को फिर से लागू करना होगा।

आपके द्वारा आवश्यक अधिकांश कोड चार्ट.जेएस लाइब्रेरी कोड में विभिन्न विधियों में पहले से ही उपलब्ध है। नीचे किए गए अनुसार कॉपी-पेस्ट/क्लीनअप करें।

---

स्क्रिप्ट

आपका क्लिक हाथ के बल्लेबाज होना चाहिए

$('#myChart').click(function (e) { 
    var helpers = Chart.helpers; 

    var eventPosition = helpers.getRelativePosition(e, myRadarChart.chart); 
    var mouseX = eventPosition.x; 
    var mouseY = eventPosition.y; 

    var activePoints = []; 
    // loop through all the labels 
    helpers.each(myRadarChart.scale.ticks, function (label, index) { 
     for (var i = this.getValueCount() - 1; i >= 0; i--) { 
      // here we effectively get the bounding box for each label 
      var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max) + 5); 

      var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize); 
      var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle); 
      var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily); 
      var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily); 
      ctx.font = pointLabeFont; 

      var labelsCount = this.pointLabels.length, 
       halfLabelsCount = this.pointLabels.length/2, 
       quarterLabelsCount = halfLabelsCount/2, 
       upperHalf = (i < quarterLabelsCount || i > labelsCount - quarterLabelsCount), 
       exactQuarter = (i === quarterLabelsCount || i === labelsCount - quarterLabelsCount); 
      var width = ctx.measureText(this.pointLabels[i]).width; 
      var height = pointLabelFontSize; 

      var x, y; 

      if (i === 0 || i === halfLabelsCount) 
       x = pointLabelPosition.x - width/2; 
      else if (i < halfLabelsCount) 
       x = pointLabelPosition.x; 
      else 
       x = pointLabelPosition.x - width; 

      if (exactQuarter) 
       y = pointLabelPosition.y - height/2; 
      else if (upperHalf) 
       y = pointLabelPosition.y - height; 
      else 
       y = pointLabelPosition.y 

      // check if the click was within the bounding box 
      if ((mouseY >= y && mouseY <= y + height) && (mouseX >= x && mouseX <= x + width)) 
       activePoints.push({ index: i, label: this.pointLabels[i] }); 
     } 
    }, myRadarChart.scale); 

    var firstPoint = activePoints[0]; 
    if (firstPoint !== undefined) { 
     alert(firstPoint.index + ': ' + firstPoint.label); 
    } 
}); 

---

फिडल - http://jsfiddle.net/1Lngmtz7/

Answer 2

chart.js 2.5 में

(शायद भी पहले) आप एक डाल सकते हैं विकल्पों में क्लिक करें:

'legend' : { 
    'onClick' : function (evt, item) { 
        console.log ('legend onClick', evt, item); 
       }, 
    'display' : true, 
    'labels' : ...