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

我用

解决了这个问题

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

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

Answer 3

如果通过onClick选项添加点击处理程序，则可以通过getElementsAtEventForMode（）调用使用以下代码：

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

您可能需要为其他图表类型添加额外的开关检查，但是我敢肯定您的想法。

Answer 4

I Solved this problem with single or multiple label click you will be find using true/false

First you need to set your chartJs Id click 

below code SessionChart = Your ChartJs ID e.g. ("myChart") I was replace it for my Id

document.getElementById("SessionChart").onclick = function (evt) {
var meta = SubscriberSessionChart.getDatasetMeta(0);
  if (meta.$filler.chart.legend.legendItems[0].text.toLowerCase() "sessions") 
  {
      if (meta.$filler.chart.legend.legendItems[0].hidden) {
             sessionHidden = true;
      }
   }
}

here "sessions" = first label text

meta.$filler.chart.legend.legendItems[0].text.toLowerCase() = is your first label 
from Array so you can get multiple label's click here true / false

if (meta.$filler.chart.legend.legendItems[0].hidden) = your label is not active then 
you will get hidden true otherwise you will get false if not tick on label 
by default label tick hidden is false in chart js

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

4 个答案: