Come aggiungere eventi OnClick sulle etichette in Chart.js v2.0?

Question

Alla ricerca di un metodo per aggiungere un handle onClick sull'elemento "label" in chartjs 2.0 Poiché l'utilizzo del metodo seguente restituirà "undifined" in console.log ogni volta che si fa clic su uno degli attributi dell'etichetta in Char.js V2.0 RadarChart .

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 controlli solo principali elementi del grafico (barre, punti, settori ...). Se vuoi prendere in considerazione anche le etichette, dovrai reimplementare la funzionalità per le etichette.

La maggior parte del codice necessario è già disponibile in diversi metodi nel codice della libreria Chart.js. Basta copiare/incollare/cancellare come fatto di seguito.

---

Script

vostro click curva dovrebbe essere

$('#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); 
    } 
}); 

---

Fiddle - http://jsfiddle.net/1Lngmtz7/

Answer 2

a chart.js 2.5 (forse anche prima) si può porre onClicca tra le opzioni:

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