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

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

getElementsAtEvent controlla solo gli elementi principali 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.


copione

Dovresti essere il tuo click hander

 $('#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/

in chart.js 2.5 (forse anche prima) puoi inserire un onClick nelle opzioni:

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