2

人のレース時間を示すグラフがあります（以下のコードをフローの例のいずれかにコピー/貼り付けすると、動作するはずです）。y1 軸に時間を、y2 軸に 1 km あたりのペースを示しています。どちらも時間 %H/%M/%S であるためです。しかし、グラフ内に各レースの距離も表示したいと思います。このデータセット (距離) の単位は y 軸とは異なるため、y 軸で表示しても意味がありません。X 軸の目盛り文字列に距離の詳細を追加できると考えていましたが、後でツールチップでデータを再利用することはできません。ツールチップからデータセットの「距離」にアクセスする方法、または何らかの形で 3 番目の y 軸スケールをグラフに表示する方法について、誰かアイデアはありますか?

<h1>Times and Distances</h1>

<pre>
Event       Distance    Time        Pace Km
R1      4 Mile      00:23:14        
R2      5 Mile      00:28:27        
R3      5 Mile      00:29:08        
R4      4 Mile      00:21:16        
R5      5 KM        00:16:42        
R6      5 Mile      00:25:41    00:03:12 
R7      5 KM        00:16:03    00:03:13 
R8      5 Mile      00:28:13    00:03:30 
</pre>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script id="source" language="javascript" type="text/javascript">
$(function () {
    var d1 = [ 
        {
            label: "Time",
            lines: {show: true, fill: false},
            points: {show: true, fill: false},
            data: [ [0,600000],[1,1200000],[2,1800000],[3,1800000],[4,2400000],[5,3600000],[6,4800000],[7,5200000] ]
        },
        {
            label: "Pace per Km",
            yaxis: 2,
            lines: {show: true, fill: false},
            points: {show: true, fill: false},
            data: [ [0,3000],[1,2800],[2,3000],[3,3000],[4,2500],[5,3000],[6,2500],[7,3000] ]
        }
                    //,
        //{
        //  label: "Distance",
        //  yaxis: 2,
        //  bars:   {show: true},
        //  data: [ [0,3],[1,2.8],[2,3],[3,3],[4,2.5],[5,3],[6,2.5],[7,3] ]
        //}
    ];

    $.plot($("#placeholder"),
             d1,
           { 
            xaxis: { 
                    ticks: [ [0,'R1'],[1,'R2'],[2,'R3'],[3,'R4'],[4,'R5'],[5,'R6'],[6,'R7'],[7,'R8'] ] 
            },
            yaxis:{
                    mode: "time",
                    min: 500000,
                    max: 6000000,
                    timeformat: "%H:%M:%S"
            },
            y2axis:{
                    mode: "time",
                    min: 2000,
                    max: 4000,
                    timeformat: "%M:%S"
            },
            selection: { mode: "xy" },
            grid: { hoverable: true, clickable: true }
        });

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

    if (item) {
    if (previousPoint != item.datapoint) {
    previousPoint = item.datapoint;

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

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

    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',
    opacity: 0.80
    }).appendTo("body").fadeIn(200);
    }
});
</script>
4

2 に答える 2

1

3番目のy軸は運が悪いと確信しています。

この状況で私が通常行うことは、ツールチップに表示するデータに x 座標をマップするグローバル配列を用意することです。次のように想像してください。

var y3data = [3,2.8,3,3,2.5,...];//y-values from your Distance series

次に、プロットオーバー関数で、への呼び出しは次のようにshowTooltipなります。

showTooltip(item.pageX, item.pageY,
    item.series.label + " of " + x + " = " + y + 
    ' and the race was '+y3data[x]+'km long');
于 2010-09-29T19:31:24.660 に答える
1

私はまだ自分で試していませんが、ドキュメントでサポートされているようです。どこにも制限を指定しておらず、次のように述べています。

一般に、データ ポイントを処理する Flot のさまざまなインターフェイスは、使用する軸番号 (1 から開始) を指定する xaxis/yaxis パラメータを受け入れるか、座標を x2/x3/... または x2axis/x3axis として直接指定できます。 /... "x" または "xaxis" の代わりに。

于 2013-04-16T00:49:43.573 に答える