2015-07-28 107 views
1

在從懸停狀態轉爲非懸停狀態之前,似乎沒有任何選項或實現在顯示工具提示一兩秒鐘之前消失。所以,當你的鼠標懸停在工具提示上時,它會顯示,但是當你將鼠標從點上移開時,我希望顯示額外的2秒,而不是像當前那樣立即消失。Chart.js(折線圖)工具提示持續時間/延遲

我所做到目前爲止

  • 我已經通過文件和可用工具提示選項看去。它有一個customTooltip函數可用,但是當你想實現一個完全自定義的工具提示時。
  • 通過chart.js線條圖的代碼庫,它附加了事件,似乎無法弄清楚如何添加延遲。
  • 看到'mouseout','mouseover'事件數組字符串列表,但似乎無法弄清楚如何使用它們。

有人可以請我指出正確的方向,我需要做什麼在工具提示上實現這種延遲/淡入效果。

回答

1

工具提示被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); 
} 

如果圖表是要清除掉所有的提示這會延遲提示。

請注意,如果移動到另一個工具提示,則不會延遲刪除舊的工具提示。如果你希望它這是一個延遲消失,你需要維護自己的活躍點中的元素(瞬間)推陣列/飛出元素(有延遲)


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