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

StackOverflow https://stackoverflow.com/questions/445482

質問

現在、 Flot グラフ、 API は全体的に非常に強力なようですが、高度な使用例は広く文書化されていません。

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

誰かが出会ったいくつかの例、またはその問題のコードを貢献できるかどうか知りたいのですが、それは次の例を示しています：

  • Flotチャート要素のイベントにカーソルを合わせるとトリガーされる動的ツールチップ
  • ツールチップにチェックマークを付けます（xaxisにカーソルを合わせると詳細が表示されます）
  • Flotで使用されたあらゆる種類のホバーオーバー/動的イベントバインディング

探している効果は this に似ていますFlashチャートの例を開く

役に立ちましたか？

解決

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

他のヒント

シンプルなツールチッププラグインもあります。こちら

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

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

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

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

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

この関数は、呼び出されたときにツールチップ要素を構築して表示します。パラメーター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);
    }

これはバインドです。flotのプレースホルダーとして使用される要素が利用可能な場合に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;
        }
    });

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

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

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

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top