js(折线图)工具提示持续时间/延迟

Chart.js (line chart) tooltip duration/delay

本文关键字：持续时间 延迟 工具提示 折线图 js      更新时间：2023-09-26

似乎没有任何选项或实现在工具提示从悬停到非悬停状态消失之前显示一两秒钟。所以当你把鼠标悬停在工具提示上时，很好，它会显示出来，但是当你把鼠标从这个点移开时，我想让它多显示2秒，而不是像现在这样立即消失。

我已经做了什么

    我已经浏览了文档和可用的工具提示选项。它有一个customTooltip函数可用，但这是为当你想实现一个完全自定义的工具提示。
  • 浏览了chart.js线形图的代码库，它附加了事件，似乎不知道如何添加延迟。
  • 看到'mouseout'， 'mouseover'事件数组字符串列表，但似乎不知道如何使用它们

有人可以指出我在正确的方向，我需要做什么在工具提示上实现这个延迟/淡出效果

工具提示被showTooltip函数清除(重绘会清除现有的工具提示)。一种naïve方式是挂钩到这个来引入延迟，像这样

var data = {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [
        {
            data: [12, 23, 23, 43, 45, 12, 33]
        }
    ]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data);
var originalShowTooltip = myLineChart.showTooltip;
var timeout;
myLineChart.showTooltip = function (activeElements) {
    var delay = (activeElements.length === 0) ? 2000 : 0;
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        originalShowTooltip.call(myLineChart, activeElements);
    }, delay);
}

如果图表要清除所有工具提示，则会延迟显示工具提示。

注意，如果您移动到另一个工具提示，删除旧的工具提示不会延迟。如果你想让它延迟消失，你需要维护你自己的活动点数组(即时)推入元素/弹出元素(有延迟)

提琴- http://jsfiddle.net/zubynd0c/

相关文章：