Javascript 通过ChartJS的交互式图表

我正在尝试使我的图形具有交互性，这样我就可以单击这些条，然后执行某种操作。目前，我只是想让它正常交互，所以我只是想让它进入activePoints变量

console.log（）。但在以下方面存在一个问题：

var-activePoints=barChart.getSegmentsAtEvent（evt）

我的控制台中出现以下错误：

未捕获类型错误：barChart.getSegmentsAtEvent不是函数

顺便说一句，我删除了代码中的barChartOption部分，以使其更易于阅读

function graph(id) {
                var barChartCanvas = $("#" + id).get(0).getContext("2d");
                var barChart = new Chart(barChartCanvas);
                var barChartData = getAreaChartData();
                barChartData.datasets[0].fillColor = "#2E2EFE";
                barChartData.datasets[0].strokeColor = "#2E2EFE";
                barChartData.datasets[0].pointColor = "#2E2EFE";
                var barChartOptions = {
                };

                barChartOptions.datasetFill = false;
                barChart.Bar(barChartData, barChartOptions);

                $("#"+id).click( 
                    function(evt){
                        var activePoints = barChart.getSegmentsAtEvent(evt);
                        console.log("activePoints= ", activePoints);
                    }
                );  
            }
        });

我尝试用谷歌搜索错误，但找不到解决此问题的方法。有没有人能向我解释我做错了什么

条形图应使用的方法是
getBarsAtEvent
（
getSegmentsAtEvent
用于饼图/圆环图和极坐标图）

getBarsAtEvent
是条形图对象上的一个方法，即调用
.bar
返回的方法


因此，您需要进行如下所示的2个小更改

...
var actualBarChart = barChart.Bar(barChartData, barChartOptions);
...
...
     var activePoints = actualBarChart.getBarsAtEvent(evt);
...

我有一个与charts.jsv2相同的问题：即使代码在V1.1上运行得很好，也不是完全没有用处

这是我用来触发图例和图表之间交互的代码：

    helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index){
        helpers.addEvent(legendNode, 'mouseover', function(){
            var activeSegment = moduleDoughnut.segments[index];
            activeSegment.save();
            activeSegment.fillColor = activeSegment.highlightColor;
            moduleDoughnut.showTooltip([activeSegment]);
            activeSegment.restore();
        });
    });

如你所见，我将“鼠标悬停”事件附加到每个图例项上。因此，当项目悬停时，关联的图表部分高亮显示

现在，我一直在尝试使用V2实现同样的功能，但我就是找不到任何方法触发图表上的事件

有什么想法吗


更新：

GIT存储库中的Evert Timberg为我提供了这个奇妙而优雅的解决方案，我通过添加mouseout事件对其进行了增强：


Chart.helpers.each（document.getElementById（'legendContainer'）.firstChild.childNodes，函数（legendNode，索引）{
Chart.helpers.addEvent（legendNode，'mouseover'，function（）{
var activeSegment=window.myDoughnut.data.datasets[0]。元数据[index]；
window.myDoughnut.tooltip.initialize（）；
window.myDoughnut.tooltip.\u active=[activeSegment]；
window.myDoughnut.tooltip.update（true）；
window.myDoughnut.render（window.myDoughnut.options.hover.animationDuration，true）；
});
Chart.helpers.addEvent（legendNode，'mouseout'，function（）{
window.myDoughnut.tooltip.\u active=[]；
window.myDoughnut.tooltip.update（true）；
});
});谢谢。很抱歉这么晚才回复。我最近才有机会做这个项目。您的更改非常有效：）