2

I'm looking for a way to activate a/some datapoint(s) on a jquery flot line chart by triggering a click on an external button. How could i do this - how would i get a handle on a datapoint without using the mouse - and how would i activate it and activate a tooltip?

Thanks for any expert advice!

4

2 に答える 2

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)     
})

デモ：http：//jsfiddle.net/et87Y/73/

于 2012-12-15T20:18:42.547 に答える
2

Flotは、ドキュメントの「プロットメソッド」セクションで説明されているように、プロットオブジェクトにハイライトメソッドとハイライト解除メソッドを提供します。

シリーズのインデックスとシリーズ内のポイントのインデックスを渡すと、そのポイントが強調表示されます。

Flotにバンドルされているexamplesフォルダーにある「interacting」の例には、この機能のライブデモがあります。

于 2012-12-15T19:29:32.137 に答える