Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/401.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Chart.js(折线图)工具提示持续时间/延迟_Javascript_Css_Chart.js - Fatal编程技术网

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

Javascript Chart.js(折线图)工具提示持续时间/延迟,javascript,css,chart.js,Javascript,Css,Chart.js,在工具提示从悬停状态变为非悬停状态时消失之前的一两秒钟内,似乎没有任何选项或实现。所以当你把鼠标悬停在工具提示上时,很好,它会显示出来,但是当你把鼠标从这个点上移开时,我想让它再显示2秒钟,而不是像现在那样立即消失 到目前为止我做了什么 我已经浏览了文档和可用的工具提示选项。它有一个customTooltip功能可用,但这是在您想要实现完全自定义的工具提示时使用的 查看了chart.js line chart的代码库,其中附加了事件,但似乎不知道如何添加延迟 看到了字符串的“mouseout”

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

到目前为止我做了什么

  • 我已经浏览了文档和可用的工具提示选项。它有一个customTooltip功能可用,但这是在您想要实现完全自定义的工具提示时使用的
  • 查看了chart.js line chart的代码库,其中附加了事件,但似乎不知道如何添加延迟
  • 看到了字符串的“mouseout”、“mouseover”事件数组列表,但似乎不知道如何使用它们

有人能告诉我在工具提示上实现此延迟/淡入效果需要做什么。

工具提示由showTooltip功能清除(重画清除现有工具提示)。所以一个天真的方法就是把它挂在这里,引入你的延迟,就像这样

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);
}
如果图表要清除所有工具提示,则会延迟工具提示

请注意,如果继续使用其他工具提示,则删除旧工具提示不会延迟。如果您希望这是一个延迟的消失,您需要维护自己的活动点阵列(即时)推入元素/弹出元素(延迟)


小提琴-