通过 ChartJS 的交互式图表答案

【问题标题】：Interactive chart via ChartJS通过 ChartJS 的交互式图表
【发布时间】：2015-10-02 13:48:15
【问题描述】：

我正在尝试使我的图表具有交互性，以便我可以单击条形然后执行某种操作。目前我只是想让它正确交互，所以我只是想让它到console.log() activePoints 变量。但是下面一行有问题：

var activePoints = barChart.getSegmentsAtEvent(evt);

我在控制台中收到以下错误：

Uncaught TypeError: barChart.getSegmentsAtEvent is not a function

顺便说一句，我已经删除了代码的 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);
                    }
                );  
            }
        });

我尝试在谷歌上搜索错误，但找不到此问题的解决方案。有没有人可以向我解释我做错了什么？

【问题讨论】：

标签： javascript graph charts chart.js

【解决方案1】：

条形图应该使用的方法是getBarsAtEvent（getSegmentsAtEvent 用于饼图/圆环图和极坐标图）
getBarsAtEvent 是条形图对象上的一种方法，即由.Bar 调用返回的方法。

所以你需要如下所示的 2 个小改动

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

【讨论】：

谢谢。抱歉这么晚才回复。我最近有机会参与这个项目。您的更改效果很好:)

【解决方案2】：

我遇到了同样的问题，但使用 chart.js V2：即使代码在 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, function(legendNode, index) {
Chart.helpers.addEvent(legendNode, 'mouseover', function() {
    var activeSegment = window.myDoughnut.data.datasets[0].metaData[index];
    window.myDoughnut.tooltip.initialize();
    window.myDoughnut.tooltip._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._active = [];
    window.myDoughnut.tooltip.update(true);
});
});

这是图例项的事件触发代码。

【讨论】：