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

我尝试使用Google搜索错误但无法找到此问题的解决方案。有没有人可以向我解释我做错了什么？

Answer 1

您应该用于条形图的方法是getBarsAtEvent（getSegmentsAtEvent用于饼图/圆环图和极坐标图表）
getBarsAtEvent是条形图对象上的一种方法，即.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);
});
});

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

ChartJS的交互式图表

2 个答案: