Chart.js click on labels, using bar chart

问题:

i need help with my Chart.js interactivity. When I click on the label, I need to return the column(index) number at which I clicked.

I tried to use getElementsAtEvent but it only work if I click directly at chart.

This http://jsfiddle.net/yxz2sjam/ is pretty much what I am looking for but getPointsAtEvent is no longer available in the new versions.

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

I also found this http://jsfiddle.net/1Lngmtz7/ but it isn't working with bar chart.

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

Thank for response.

回答1:

I solve the problem with

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

this solution register clicks on chart and label, then I restricted it with e.layerY to register only clicks on label section.

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

回答2:

Using version 2.4.0, i created an onClick Event, and inside it

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

回答3:

If you add a click handler through the onClick option you can use the following code using the getElementsAtEventForMode() call:

function handleClick(evt) {
    var col;
    switch(chartType) {
        case "horizontalBar":
            this.getElementsAtEventForMode(evt, "y", 1).forEach(function(item) { col = item._index });
            break;

        case "bar":
            this.getElementsAtEventForMode(evt, "x", 1).forEach(function(item) { col = item._index });
            break;
    }

    if (!col) {
        return;
    }

    alert("Column " + col + " was selected");
};

You'll probably need to add extra switch checks for other chart types but I'm sure you get the idea.