jquery - Flot プロットオーバーの詳細

Question

Flot プロットオーバーでより多くの情報を表示することは可能ですか?

 x = item.datapoint[0]
 y = item.datapoint[1]

データに y、x、someinfo のような 3 つの情報を追加します。

[1337341819000, 7.00000000, 3.95000000]

1 つ目は日付、2 つ目は金額、3 つ目はホバーで表示する情報です。

Answer 1

ツールチップ、リンクのIDなど、データポイントに多くの情報が含まれています。

データポイントの例:[1325980800000,5,1,"6 x 4mg patch", 3]

プロットオーバーの例:

placeholder.bind('plothover', function (event, pos, item) {
    if (item && (item.series.type == 's_points' || item.series.type == 't_points')) {
        showTooltip(item.pageX, item.pageY, item.series.data[item.dataIndex][3]);
        $('canvas').css('cursor', 'pointer');
    } else {
        $('[id^="pointTooltip"]').remove();
        $('canvas').css('cursor', 'auto');
    }
});

一連のインデックスでそのデータポイントを見つけ、必要な情報を任意の配列から抽出するだけです。

Answer 2

Item には、データポイントだけでなく、そのシリーズと、そのシリーズのデータ​​配列内のポイントのインデックスも含まれます。API ドキュメントで「plothover」を検索して、完全なリファレンスを確認してください。

さらに情報を追加するには、次のいずれかを実行できます。

1. シリーズ/インデックスから追加情報への外部マッピングを作成し、ホバー ハンドラーでルックアップを行います

2. datapoints.format を変更する processRawData フックを提供して (ドキュメントの processRawData の下で説明されているように)、3 番目の非数値を追加します。これは、item.datapoint に表示されます。このアプローチにはもう少し手間がかかりますが、探していたものを正確に取得できます。

Answer 3

以下のコードに似たものを使用しました。

enter code here

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



        var previousPoint = null;
        $("#divname").bind("plothover", function (event, pos, item){
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));
            if (item) {
                if (previousPoint != item.dataIndex){
                    previousPoint = item.dataIndex;

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

                        showTooltip(item.pageX, item.pageY,
                                item.series.label +"- "+ y);
                                                    }
                    }
                else {
                    $("#tooltip").remove();
                    previousPoint = null;
                    }

            });