Chart.js -当光标移出主画布时禁用工具提示

qojgxg4l 于 2022-11-07 发布在 Chart.js

关注(0)|答案(2)|浏览(190)

我有一个折线图，工具提示如下所示

options: {
        tooltips:{
            mode: 'x',
          intersect: false,
          callbacks: {
            footer: function(tooltipItem, data) {
              return 'some text'
            }
          }
        },    
    }

它工作正常。我的问题是，当我将光标移动到主绘图区/画布之外的x轴刻度时，工具提示仍然显示。我曾尝试设置intersect: true，但只有当我直接悬停在点上时，工具提示才会显示。理想情况下，我希望每当我悬停在垂直网格线上时，工具提示都会显示（intersect:false时发生），但当我的光标移动到主画布之外时不出现。这可能吗？
小提琴：https://jsfiddle.net/dqdqdq/yp47oL9t/47/

chart.js

来源：https://stackoverflow.com/questions/68211479/chart-js-disable-tooltip-when-cursor-moves-outside-the-main-canvas

2条答案

按热度按时间

bq9c1y661#

您可以使用选项中的onHover回调来检查鼠标是否在chartArea中，如果是，则将工具提示设置为启用，否则禁用工具提示。
您可能还需要检查您正在设置的值是否已经是正确的值，因为它将保存大量不必要的更新
示例（V2）：
第一个
示例（V3）：
第一个

赞(0）回复(0）举报 2022-11-07

bpsygsoo2#

我写了一个简单的插件，当你把你的光标移出主画布时，它可以隐藏标题：

plugins: [{
    id: "toolbarHider",
    afterEvent: (chart: any, evt: any, opts: any) => {
        const { left, right, bottom, top } = chart.chartArea;
        const e = evt.event;
        const status = e.x >= left && e.x <= right && e.y <= bottom && e.y >= top;
        if (status !== chart.options.plugins.tooltip.enabled) {
            chart.options.plugins.tooltip.enabled = status;
            chart.update();
        }
    }
}]

关于Chart.js plugins的更多信息。

赞(0）回复(0）举报 2022-11-07

我来回答

Chart.js -当光标移出主画布时禁用工具提示

2条答案

相关问题

热门标签

最新问答