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

Nivelety 发表于 Dev

Nivelety

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

感谢您的回应。

Nivelety

我用解决问题

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

此解决方案注册图表和标签上的点击，然后我将其限制为e.layerY以仅注册标签部分上的点击。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。