ChartJS的交互式图表

Question

我试图使我的图形交互，所以我可以点击条形图然后做一些动作。 目前我只是想让它正确地进行交互所以我只是想把它变成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);
                    }
                );  
            }
        });

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

Answer 1

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

2. getBarsAtEvent是条形图对象上的一种方法，即.Bar调用返回的.Bar 。

---

因此，您需要进行2次小修改，如下所示

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

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

如您所见，我将“mouseover”事件附加到每个图例项目。 因此，当项目悬停时，相关的图表部分会突出显示。

现在，我一直在尝试使用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); }); }); 

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