Flot - Is it possible to have a third y-axis or hi

问题:

I have a graph showing a persons races times (if you copy/paste the code below into any of the flot examples it should work). I'm showing the time on the y1 axis and the pace per km on the y2 axis, since they are both times %H/%M/%S. But i'd also like to show the distance for each race within the graph. Since the units on this dataset (distance) are different to the yaxis, it doesn't make sense to show it via the y-axis. I was thinking i could add the distance details to the x-axis tick strings, but this would not allow me to reuse the data in a tooltip later. Has anybody any ideas, on how i can access the dataset 'distance' from a tooltip, or somehow fudge a third y-axis scale onto the chart?

<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>

回答1:

I'm pretty sure you're out of luck for a 3rd y-axis.

What I usually do in this situation is just have a global array that maps the x coordinate to whatever data you want to show in the tooltip, so imagine this:

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

Then in your plothover function your call to showTooltip becomes:

showTooltip(item.pageX, item.pageY,
    item.series.label + " of " + x + " = " + y + 
    ' and the race was '+y3data[x]+'km long');

回答2:

I've yet to try it myself, but it appears to be supported in the documentation. It doesn't specify a limit anywhere and it says:

Generally, the various interfaces in Flot dealing with data points either accept an xaxis/yaxis parameter to specify which axis number to use (starting from 1), or lets you specify the coordinate directly as x2/x3/... or x2axis/x3axis/... instead of "x" or "xaxis".