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을 사용하여, 나는 온 클릭 이벤트를 생성하고,

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