Chart.js棒グラフを使用してラベルをクリック

Question

私はChart.jsインタラクティブ機能に助けが必要です。ラベルをクリックすると、クリックした列（インデックス）番号を返す必要があります。

私はgetElementsAtEventを使用しようとしましたが、チャートで直接クリックすると機能します。

このhttp://jsfiddle.net/yxz2sjam/は私が探しているものですが、getPointsAtEventは新しいバージョンでは使用できなくなりました。

canvas.onclick = function (evt) { 
var points = chart.getPointsAtEvent(evt); 
alert(chart.datasets[0].points.indexOf(points[0])); 
}; 

これもこのhttp://jsfiddle.net/1Lngmtz7/が見つかりましたが、棒グラフでは機能しません。

var ctx = document.getElementById("myChart").getContext("2d"); 
    var myRadarChart = new Chart(ctx, { 
     type: 'radar', 
     data: data 
    }) 

    $('#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 = []; 
     helpers.each(myRadarChart.scale.ticks, function (label, index) { 
      for (var i = this.getValueCount() - 1; i >= 0; i--) { 
       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 

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

ありがとうございます。

Answer 1

は、私はその後、私は唯一のラベル部分をクリックする登録するe.layerYでそれを制限し、チャートやラベルに

document.getElementById("chart").onclick = function(e) 
{ 
    var activeElement = weatherMainChart.lastTooltipActive; 
    console.log(activeElement[0]._index); 
}; 

このソリューションレジスタクリックで問題を解決します。

document.getElementById("chart").onclick = function(e) 
{ 
    var activeElement = weatherMainChart.lastTooltipActive; 
    if(e.layerY > 843 && e.layerY < 866 && activeElement[0] !== undefined) 
     console.log(activeElement[0]._index); 
}; 

Answer 2

は、バージョン2.4.0を使用して、私はのonClickイベントを作成し、それ

var activeIndex = localChart.tooltip._lastActive[0]._index; 
 
var clickCoordinates = Chart.helpers.getRelativePosition(e, localChart.chart); 
 
if (clickCoordinates.y >= 530) { //custom value, depends on chart style,size, etc 
 
    alert("clicked on " + localChart.data.labels[activeIndex]); 
 
}