6

現在、 http://people.iola.dk/olau/flot/examples/interacting.htmlの例を見ていますが、データポイントの座標を取得する方法がわかりません。プロットをクリックしないので、イベント plotclick を利用できません。今私の質問: クリックせずに、データポイントの x 座標と y 座標を取得する別の方法はありますか? jQuery スライダーを使用してグラフ上のさまざまなポイントを強調表示し、データポイントの横にツールチップを表示したいと考えています。

前もって感謝します ：）

4

3 に答える 3

6

これは少し遅れましたが、折れ線グラフでプロットされたデータポイントの下にラベルを付ける方法としてグラフをプロットした後、この関数を実行しました。

$(document).ready(function(){
$(function(){
      var data =  [
            {data: [[1, 5], [2, 10], [3, 15], [4, 15], [5, 10], [6, 5]], color: '#3a8df6'},
            {data: [[1, 52], [2, 42], [3, 32], [4, 32], [5, 42], [6, 52]], color: '#ff0000'}
            ];
      var options = {
              lines: {show: true},
              yaxis: {tickDecimals: 0, min: 0, max: 100, autoscaleMargin: null}
             };
     var graph = $.plot($('#graph'), data, options);
     var points = graph.getData();
     var graphx = $('#graph').offset().left;
     graphx = graphx + 30; // replace with offset of canvas on graph
     var graphy = $('#graph').offset().top;
     graphy = graphy + 10; // how low you want the label to hang underneath the point
     for(var k = 0; k < points.length; k++){
          for(var m = 0; m < points[k].data.length; m++){
            showTooltip(graphx + points[k].xaxis.p2c(points[k].data[m][0]), graphy + points[k].yaxis.p2c(points[k].data[m][1]),points[k].data[m][1])
            }
      }
 });
 });
 function showTooltip(x,y,contents){
      $('<div id="tooltip">' +  contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y,
            left: x
      }).appendTo("body").fadeIn(200);
 }

これは私の頭の中ではありませんが、基本的に、この関数はすべてのデータポイントを通過し、軸で p2c 関数を使用してから、グラフ自体のオフセットにこれを (いくつかのパディングで) 追加します。次に、通常のツールチップ オーバーレイを使用します。

また、これを棒グラフで使用する場合は、ツールチップの幅を設定し、テキストを中央に揃えてから、すべてのラベルを一列に並べたい場合は、yaxis p2c 関数に単一の数値を入力します。次に、グラフィックパディングを使用して、必要な場所に配置します。

これが将来誰かに役立つことを願っています:)

于 2011-06-14T10:55:12.417 に答える
2

flot APIから:

軸オブジェクトにはさまざまなものが詰め込まれています。たとえば、getAxes().xaxis.ticks を使用して、xaxis の目盛りが何であるかを調べることができます。他の 2 つの便利な属性は、p2c と c2p です。これらは、データ ポイント空間からキャンバス プロット空間への変換とその逆の変換を行う関数です。両方とも、プロット オフセットでオフセットされた値を返します。

plot.offset()（ドキュメントに対するグリッド領域のオフセット）と組み合わせると、残りを把握するために必要なすべてのツールが必要になります。plot.pointOffset()も便利です。含まれている div に対するポイントの位置を返します。

于 2010-08-02T20:09:42.500 に答える
0

コンテナ内の x、y 座標を理論的に取得する方法は次のとおりです。

$(function () {
        $('#container').mousemove(function (e) {
            $('.xPos').text(e.clientX - $('#container').offset().left);
            $('.yPos').text(e.clientY - $('#container').offset().top);
        });
    });
于 2010-06-03T10:25:02.447 に答える