浮動圖表工具提示匹配Y軸

我正在嘗試將工具提示添加到我的flotcharts區域和線圖中，該圖將顯示所有Y軸上的結果，並且它會顯示鼠標的Y軸鼠標的工具提示並不需要完全一樣。例如看看morris.js。最後，我想能夠觸發此爲一個以上的圖形在同一頁面example 浮動圖表工具提示匹配Y軸

這裏是我的陰謀（）

$.plot($("#placeholder"), data, { 
       series: { 
        stack: true, 
        lines: { show: lines, fill: true, steps: steps }, 
        bars: { show: bars, barWidth: 0.6 } 
       }, yaxis: { min: 0}, xaxis: {mode: "time", timeformat: "%H:%M"}, 
       legend : { show: true, container : '#placeholder', noColumns: 9, margin: ['500px', 35]} 
      });

預先感謝您的例子。

來源

2013-06-30 WojonsTech

你問3個問題在這裏：

問題1：

我想提示添加到我的flotcharts區域和線路圖，顯示在是Y的所有結果軸

問題2：

此外，它將顯示clost Y軸的工具提示，鼠標不需要精確地顯示整個點。例如看morris.js。

問題3：

最後，我想能夠觸發此爲一個以上的圖形在同一頁面例如

我來回答第二個問題，因爲一旦你有了問題2的答案，其他人就會相當簡單。

基本上，您需要做的所有事情是獲取鼠標位置，並使用flot的pointOffset函數（請參閱https://github.com/flot/flot/blob/master/API.md#plot-methods）將其與所有數據點的位置進行比較。如果鼠標和點之間的距離最短，請在工具提示中使用它。這裏有一個例子：http://jsfiddle.net/RUKvk/54/

問題1：你需要稍微修改我的函數存儲在短短的一個代替點的列表。如果距離在一定範圍內，請將其添加到列表中。

問題3：通過在另一個圖上調用該函數，很容易實現多個圖。你必須稍微修改一下這個函數才能使它工作，但是原理是一樣的。

來源

2013-07-08 20:31:20 CullenJ

我喜歡某人終於在我將所有圖表移動到morris後的第二天回答這個問題。 – WojonsTech

哈哈！好吧，我認爲我會反正一槍。我現在很想切換到莫里斯 - 感謝您的鏈接！ :) – CullenJ

莫里斯圖表超級慢所有其他然後鉻的所有broswers，所以可能不得不回到flot，但我要看看如果我能找出性能問題與莫里斯將是偉大的，如果我可以與其他人一起工作 – WojonsTech

浮動圖表工具提示匹配Y軸

回答

相關問題