2012-12-15 46 views
2

我正在尋找一種方法來通過觸發一個外部按鈕上的一個點擊來激活一個jquery flot折線圖上的一個或多個數據點。我怎麼能這樣做 - 我怎麼會得到一個數據點上的句柄,而不使用鼠標 - 我將如何激活它並激活工具提示?任何方式來選擇一個沒有懸停/點擊(外部按鈕)的浮選圖表數據點

感謝您的任何專家意見!

+0

可能需要爲這個 – charlietfl

+0

ok了更強大的圖表庫 - 在這裏你會建議我看? – user1051849

+0

真實地看起來更深的文檔(Flot文檔曾經是非常原始的)...看起來像有一些'突出/不高興'的方法。將玩幾分鐘,看看我能找出什麼 – charlietfl

回答

6

在我以前的評論中,我沒有意識到FLOT中存在的API鉤子和方法。舊的文檔是一個非常原始的txt文件。下面是一個簡單的例子,使用highlight/unhighlight以及使用pointOffset()方法來計算圖表中數據點的像素位置,以定位工具提示。

<button data-index="4">Highlight 5th point</button> 
<button data-index="9">Highlight 10th point</button> 
<button data-index="19">Highlight 20th point</button> 

JS:

var plotData =/* data array*/ 

$('button').click(function(){ 
    var idx=$(this).data('index'); 
    plot.unhighlight() 
    plot.highlight(dataSeriesIndex, idx); 
    var dataPoint=plotData[idx]; 
    var position=plot.pointOffset({ x: dataPoint[0], y: dataPoint[1] }) 
    var tipHTML='Data:<br> X='+dataPoint[0] +'<br> Y=' +dataPoint[1]; 
    $('#tooltip').css({left: position.left+10, top: position.top-10}).show().html(tipHTML)  
}) 

DEMO:http://jsfiddle.net/et87Y/73/

+0

非常好的做法。由於我沒有看到我的觀點,所以突出顯示方法不會起作用。使用你的工具提示方法,我在劇情上創建了自己的高光圖形。 –

+0

代碼在jsfiddle鏈接中不起作用 – ddagsan

+1

@ddagsan確定,由於鏈接到原始github插件源,在某些瀏覽器中工作而不是其他人。再次使用cdn version..try更新鏈接 – charlietfl

2

Flot在繪圖對象上提供了高亮和高亮方法,如文檔的Plot Methods部分所述。

傳入系列的索引和系列中的點的索引,並突出顯示該點。

在與Flot捆綁的示例文件夾中找到的'交互'示例具有此功能的實時演示。

相關問題