在Chart.JS的条形图的鼠标和鼠标输出上的活动?

时间:2018-02-13 15:32:57

标签: javascript chart.js chart.js2

我已经搜索了bar chartevent文档(我发现有点令人困惑)并且我一直无法弄清楚如何对mousein和mouseout事件采取行动当悬停在条形图的条形图上时(不是图例!)。目前我最接近的是使用工具提示上的回调,如下所示:

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

这个解决方案不能很好地工作,因为不知道指针何时离开栏我不知道何时将布尔拉回来。这可能吗?

1 个答案:

答案 0 :(得分:1)

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

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