2014-09-19 82 views
0

我有使用JQuery Flot製作的條形圖。我想要的是,當我將鼠標移過某個欄時,向我展示一個工具提示。條形圖中的JQuery Flot plothover事件

看看我在條形圖選項中所做的一些定義。

grid: { 
    hoverable: true, 
    borderWidth: 0, 
    color: '#838383', 
    clickable: true 
} 

當我加載的所有數據,並繪製圖表,我綁定plothover事件像下面

$(dataParameters.containerSuccess).bind("plothover", self.funcaoPassarMouse);

plothover功能的認沽

self.funcaoPassarMouse = function (event, pos, item) { 
    if (item) { 
     if (previousPoint != item.dataIndex) { 
      previousPoint = item.dataIndex; 
      $("#tooltip").remove(); 
      var x = item.datapoint[0].toFixed(2), 
      y = self.CommaFormatted(item.datapoint[1].toFixed(2)); 
      var mes = self.ObtemMes(item); 
      self.exibirTooltip(item.pageX, item.pageY, "R$ " + y + " em " + mes); 
     } 
    } else { 
     $("#tooltip").remove(); 
     previousPoint = null; 
    } 
} 

我有很多的使用JQuery Flot的圖表,並且在所有這些圖表中,使用此函數的plothover事件工作得很好,除了Bars圖表之外。

In Bars charts我看到item參數帶有一個null值,我不知道爲什麼。

任何人都可以幫助我嗎?

JSFiddle

+0

你能製作一個演示你的問題的小提琴(或更好的堆棧片段)嗎? – 2014-09-19 13:29:27

+0

@MattBurland當然,給我幾分鐘,我會讓小提琴的鏈接在這裏 – 2014-09-19 13:30:56

+0

它在這裏工作正常:http://jsfiddle.net/mwyeck3q/1/ – 2014-09-19 13:40:44

回答

0

的問題似乎是與time軸如何與條形圖相互作用。最簡單的解決方案可能會將您的時間轉換爲字符串,並使您的座標軸爲category。例如:

var data = [ 
     [new Date(1388534400000).toDateString(), 10], 
     [new Date(1391212800000).toDateString(), 8], 
     [new Date(1393632000000).toDateString(), 4], 
     [new Date(1396310400000).toDateString(), 13], 
     [new Date(1398902400000).toDateString(), 17], 
     [new Date(1401580800000).toDateString(), 9] 
    ]; 

然後:

 series: { 
      bars: { 
       show: true, 
       align: "center", 
       barWidth: 0.05  // set this to whatever makes them skinny enough for you 
      } 
     }, 
     xaxis: { 
      mode: "categories", 
      //... etc 

http://jsfiddle.net/7snkmshf/4/

注:處理時區是留給讀者。