javascript - 在 Chart.js 中实现悬停回调

Question

我正在尝试在使用 Chartjs 制作的图表中实现 hover 回调。以下是我感到困惑的部分:

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        // Am I supposed to put onHover callback inside of hover property of options?
        //hover: {
        //    onHover: (e, elements): void => {}
        //}
        // OR
        // Am I supposed to put onHover callback just as a property of options?
        // onHover: (e, elements): void => {}
    }
});

棘手的部分是我已经尝试了这两种方法并且它以任何一种方式都有效。我一直在研究他们的文档，但似乎没有找到正确的方法。根据他们的文档，onHover:在任何事件触发时调用。在图表的上下文中调用并传递事件和事件元素数组(条形图、点图等)。 难道不应该在仅触发 hover 事件时调用它吗？任何见解将不胜感激!

Answer 1

您应该在悬停选项内实现 onHover 回调，以便您可以指定您的选项。事件悬停对于所有其他事件都会触发，因为它们中有一个悬停，即事件单击，先有一个悬停，然后有一个单击。

var chart = new Chart(document.getElementById('chart').getContext('2d'), {
                options: {
                    hover: {
                        mode: 'nearest',
                        intersect: false,
                        onHover: function (e, item) {
                            if (item.length) {
                                const data = item[0]._chart.config.data.datasets[0].data[item[0]._index];
                                console.log(item, data);
                            }
                        }
                    }
                }
            });