在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：Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc).只有在hover事件发生时才会调用它？任何见解都将不胜感激！

Answer 1

您应该在悬停选项内实现onHover回调，以便您可以指定选项。对于所有其他事件，事件悬停很容易触发，因为它们具有悬停功能，即事件单击，悬停然后单击。

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