在 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). 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, item) {
                            if (item.length) {
                                const data = item[0]._chart.config.data.datasets[0].data[item[0]._index];
                                console.log(item, data);
                            }
                        }
                    }
                }
            });