web-dev-qa-db-ja.com

フローティングツールチップを使用したFlotの例はありますか？

私は現在 Flot グラフに取り組んでいます [〜＃〜] api [〜＃〜] 全体的にかなり強力に見えますが、高度な使用例は広く文書化されていません。

APIは、グラフ上でホバーリング可能に設定する方法があることを示唆しています。正確にそれが私がそれで何ができるかを意味しているとは確信していません。

誰かが彼らが遭遇したいくつかの例、またはその問題のコードを寄稿できるかどうか知りたいのですが、それは以下のいずれかの例を示しています。

  • フロートチャート要素のイベントにカーソルを合わせるとトリガーされる動的なツールチップ
  • ティックツールチップ（x軸にカーソルを合わせると詳細が表示されます）
  • フロートで使用されたあらゆる種類のホバー/ダイナミックイベントバインディング

私が探している効果は this Open Flash Chart exampleに似ています

javascriptjqueryjavascript-eventsflotgraphing
21
j pimmel

チャートのプロットポイントのツールチップを示す このフロットの例 をご覧ください。 （[ツールチップを有効にする]チェックボックスを必ず選択してください。）

48
Simon Lieschke

簡単なツールチッププラグインもあり、見つけることができます here

また、プラグインにいくつかの機能を追加します。githubで見つけることができます。 https://github.com/skeleton9/flot.tooltip

11
Green Su

http://data.worldbank.org はFlotを使用して構築され、ツールチップを使用します。

9
Kyle Mathews

Simonの回答のリンクは、フローティングツールチップで使用するフックを提供するために非常にうまく機能しました。ただし、ホバー効果を実現するために、コードを掘り下げてカットする必要があることがわかりました。これが結果です（基本的に http://people.iola.dk/olau/flot/examples/interacting.html から逐語的です）。

フロートの初期化で変更する必要がある唯一の設定は、オプションオブジェクトです。これをオプションの1つとして含める必要があります。

var options = {
 //... : {},
 grid: { hoverable: true }
};

この関数は、呼び出されたときにtooltip要素を作成して表示します。パラメータxとyはフロート内部のオフセットなので、ツールチップは適切に配置されます。内容はツールチップに表示されるものです

function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee'
        }).appendTo("body").fadeIn(200);
    }

これはバインドです。フロートのプレースホルダーとして使用される要素が利用可能な場合にのみ1回だけ呼び出す必要があります。イベントハンドラーをワイヤリングします。 previousPointは、ツールチップを表示するためのフラグとして使用されます

    var previousPoint = null;
    $("#flotPlaceHolder").bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(0),
                    y = item.datapoint[1].toFixed(0);

                showTooltip(item.pageX, item.pageY, "(" + x + "," + y + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
4
Travis J

ツールチップとフロートの統合については、このライブラリをチェックしてください

https://github.com/krzysu/flot.tooltip

3
nitin

http://craigsworks.com/projects/qtip2/demos/#flot は、私のお気に入りのJSツールチップライブラリです。そのかなり悪いとフロートの統合があります。

1
rynop

カスタムデータをデータ配列に追加し、それを使用してツールチップを表示できます。

ここで私の答えと完全な例を参照してください： フロートのポイントにカーソルを合わせるとカスタムツールチップが表示されます

1
Lasse Skindstad Ebert