Chart.js单击标签，使用条形图

问题描述

我的Chart.js交互性需要帮助。当我单击标签时，我需要返回单击时所在的列（索引）号。

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.

我尝试使用getElementsAtEvent，但只有直接单击才能使用

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

此几乎是我要寻找的东西，但是新版本中不再提供getPointsAtEvent。

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

感谢您的回复。

推荐答案

我用

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

此解决方案注册点击图表和标签，然后使用e.layerY限制它只注册点击

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

这篇关于Chart.js单击标签，使用条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！