例<a href="http://people.iola.dk/olau/flot/examples/interacting.html" rel="noreferrer">here</a>からFLOT

Question

にポイントの上にマウスを移動するとき、カスタムツールチップを表示し、私は一種のホバリング時にツールチップを表示FLOTグラフを作成する方法を知っています。しかし、例では、x値、y値、ラベルなどを含むツールチップを表示する方法のみを示しています。カスタマイズされたツールチップを作成する方法を理解することはできません。

カスタムデータを添付することはできますか？ツールチップを作成するときにアクセスできますか？

例えば、簡素化のは、私のコードのように見えると仮定してみましょうする：

今

var d = [ { label: "Fake!", data: [ [1290802154, 0.3], [1292502155, 0.1] ] } ]; 
var options = { 
    xaxis: { mode: "time" }, 
    series: { 
    lines: { show: true }, 
     points: { show: true } 
    }, 
    grid: { hoverable: true, clickable: true } 
}; 
$.plot($("#placeholder"), d, options); 

、最初のデータポイントをクリックすると、私はツールチップは、「こんにちは」と表示したい、と第二のデータポイントをクリックしたとき私は "さよなら"を見せたい。これはどうすればいいですか？ plothoverイベント

$(".placeholder").bind("plothover", function (event, pos, item) { /* etc. */ }; 

を結合するとき、私は「項目が」を意味し、そしてどのようにデータを添付するかわからないんだけど。

Answer 1

ここには私が書き上げたおおよそのJSFiddle exampleがあります。 [更新]

...あなたが好き正確にどのように機能していますが、アイデアを刺激する可能性がある場合わからないあなたは、イベントをクリックするため

$("#placeholder").bind("plotclick", function (event, pos, item) {/* code */}); 

イベントにバインドしたいと思う

私は「

[アップデート2]Updated Example

あなたのテストデータを使用するようにサンプルを調整し、上で説明したものを使ってより多くの作業を行いました。 itemオブジェクトに関しては、それがオンザフライで生成されているようですので、私が知る限り、追加データを追加することはできません。ただし、クリックしたときにオブジェクトitemをキャッシュする配列を作成し、追加のデータを追加してhoverイベントに使用することができます。

この新しい例では、何もクリックしなかったときの通常のツールチップが表示されます。一度クリックすると、クリックされたポイントが1番目か2番目のものかどうかが判断され、itemオブジェクトに追加プロパティが追加され、alternateTextというオブジェクトが追加され、itemsClickedという配列に格納されます。それはitem.dataIndexを介して得られる電流itemオブジェクトの同じインデックスに基づいて、アレイ内のキャッシュitemオブジェクトがあるかどうかを確認の上に点がホバーさ今

。一致するインデックスがキャッシュ配列itemsClickedにある場合は、itemオブジェクトを取得し、clickイベントの前に追加されたalternateTextプロパティを使用します。

item : { 
    alternateText: 'hello', 
    dataIndex: 0, 
    datapoint: [ 
     1290802154, 
     0.3 
    ], 
    pageX: 38, 
    pageY: 82, 
    series: {/* properties of the series that this point is in */}, 
    seriesIndex: 0 
} 

場合は私に知らせてください：

item : { 
    dataIndex: 0, 
    datapoint: [ 
     1290802154, 
     0.3 
    ], 
    pageX: 38, 
    pageY: 82, 
    series: {/* properties of the series that this point is in */}, 
    seriesIndex: 0 
} 

は一度、それは次のようになりますとitemsClicked配列に格納するクリック：

最初のポイントのitemオブジェクトは、次のようになりますこれが役に立ちそうですか、そうでない場合は、私は終了し、私の答えの更新を停止します：P

Answer 2

あなたは単にシリーズにデータを追加することができますこれをデータ配列に追加します。代わりに

$.plot(element, [[1, 2], [2, 4]] ...) 

の

あなたは

$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...) 

そしてカスタムラベルを表示するためにその情報を使用することができます。

完全な例については、このフィドルを参照してください。 http://jsfiddle.net/UtcBK/328/

Answer 3

また、あなたは、次のコードを試すことができます。

HTMLボディ：

<div id="content"> 
    <div class="demo-container"> 
     <div id="placeholder" class="demo-placeholder"></div> 
    </div> 
</div> 

スクリプト：

<script type="text/javascript"> 
    function showTooltip(x, y, contents, z) { 
     $('<div id="tooltip">' + contents + '</div>').css({ 
      position: 'absolute', 
      display: 'none', 
      top: y - 30, 
      left: x - 110, 
      'font-weight':'bold', 
      border: '1px solid rgb(255, 221, 221)', 
      padding: '2px', 
      'background-color': z, 
      opacity: '0.8' 
    }).appendTo("body").show(); 
    }; 

    $(document).ready(
       $(function() { 
        var data = [{ 
         "label": "scott", 
         "data": [[1317427200000 - 5000000 * 3, "17017"], [1317513600000 - 5000000 * 5, "77260"]] 
        }, 
     { 
      "label": "martin", 
      "data": [[1317427200000 - 5000000 * 2, "96113"], [1317513600000 - 5000000 * 4, "33407"]] 
     }, 
     { 
      "label": "solonio", 
      "data": [[1317427200000 - 5000000, "13041"], [1317513600000 - 5000000 * 3, "82943"]] 
     }, 
     { 
      "label": "swarowsky", 
      "data": [[1317427200000, "83479"], [1317513600000 - 5000000 * 2, "96357"], [1317600000000 - 5000000, "55431"]] 
     }, 
     { 
      "label": "elvis", 
      "data": [[1317427200000 + 5000000, "40114"], [1317513600000 - 5000000 * 1, "47065"]] 
     }, 
     { 
      "label": "alan", 
      "data": [[1317427200000 + 5000000 * 2, "82504"], [1317513600000, "46577"]] 
     }, 
     { 
      "label": "tony", 
      "data": [[1317513600000 + 5000000, "88967"]] 
     }, 
     { 
      "label": "bill", 
      "data": [[1317513600000 + 5000000 * 2, "60187"], [1317600000000, "39090"]] 
     }, 
     { 
      "label": "tim", 
      "data": [[1317513600000 + 5000000 * 3, "95382"], [1317600000000 + 5000000, "89699"]] 
     }, 
     { 
      "label": "britney", 
      "data": [[1317513600000 + 5000000 * 4, "76772"]] 
     }, 
     { 
      "label": "logan", 
      "data": [[1317513600000 + 5000000 * 5, "88674"]] 
     }]; 

        var options = { 
         series: { 
          bars: { 
           show: true, 
           barWidth: 60 * 60 * 1000, 
           align: 'center' 
          } 
         }, 
         points: { 
          show: true 
         }, 
         lines: { 
          show: true 
         }, 
         grid: { hoverable: true, clickable: true }, 
         yaxes: { 
          min: 0 
         }, 
         xaxis: { 
          mode: 'time', 
          timeformat: "%b %d", 
          minTickSize: [1, "month"], 
          tickSize: [1, "day"], 
          autoscaleMargin: .10 
         } 
        }; 

        $(function() { 
         $.plot($('#placeholder'), data, options); 
        }); 
        $(function() { 
         var previousPoint = null; 
         $("#placeholder").bind("plothover", function (event, pos, item) { 
          if (item) { 
           if (previousPoint != item.datapoint) { 
            previousPoint = item.datapoint; 

            $("#tooltip").remove(); 
            var x = item.datapoint[0], 
        y = item.datapoint[1] - item.datapoint[2]; 
            debugger; 
            showTooltip(item.pageX, item.pageY, y + " " + item.series.label, item.series.color); 
           } 
          } 
          else { 
           $("#tooltip").remove(); 
           previousPoint = null; 
          } 
         }) 
        }); 
       }) 
       ); 
</script> 

を