javascript - 通过 ChartJS 的交互式图表

Question

我正在尝试让我的图表具有交互性，这样我就可以点击条形图然后执行某种操作。目前，我只是想让它正常交互，所以我只是想让它进入 console.log() activePoints 变量。但是下面一行有问题:

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

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

Answer 1

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

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

---

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

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