Chart.JS的条形图的mousein和mouseout事件? [英] Event on Chart.JS's Bar Chart's mousein and mouseout?

问题描述

我已经搜索了条形图和事件文档(我觉得有点困惑)，我一直将鼠标悬停在条形图的条形图上(而不是图例！)时，无法弄清楚如何处理mousein和mouseout事件.目前，我能找到的最接近的是利用工具提示上的回调，如下所示:

I've scoured the bar chart and event docs (which I find a bit confusing) and I've been unable to figure out how to act on a mousein and mouseout event when hovering over a Bar chart's bars (not the legend!). Currently the closest I've been able to come is utilizing the callback on the tooltip like so:

options.tooltips = {
    backgroundColor: 'rgba(0,0,0,0)',
    fontColor: 'rgba(0,0,0,0)',
    callbacks: {
        label: function (tooltipItem) {
            // flipping a bool here
        }
    }
};

此解决方案效果不佳，因为不知道指针何时离开该条，我不知道何时将布尔值向后翻转.这可能吗?

This solution doesn't work well because without knowing when the pointer leaves the bar I don't know when to flip the bool back. Is this possible?

推荐答案

以下是我的问题的解决方案:

Here's a solution to my issue:

options.tooltips = {
    // Hide the tooltips
    backgroundColor: 'rgba(0,0,0,0)',
    displayColors: false,
    callbacks: {
        labelTextColor: function () {
            return 'rgba(0,0,0,0)';
        },
        labelColor: function () {
            return {
                borderColor: 'rgba(0, 0, 0, 0)',
                backgroundColor: 'rgba(0, 0, 0, 0)'
            }
        }
    },
    // Highlight the HTML elements on bar hover
    custom: function(tooltipModel) {

        if (tooltipModel.body === undefined) {
            // flip bool false
            return;
        }

        if (/* ... */) {
            // flip bool true
        }

        return;
    }
};

这篇关于Chart.JS的条形图的mousein和mouseout事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！