Flot navigieren Plugin - Zoom auf eine Achse beschränken

Question

Ich versuche, Zoom und Pan in meinen Flot-Charts nur in der Xaxis aktiviert, möchte ich die Yaxis im selben Bereich bleiben. Ich benutze das Navigations-Plugin der jQuery Flot-Bibliothek.

Ich konnte keine Dokumentation oder eine andere gelöste Frage dazu finden. Also habe ich es versucht, indem ich den yaxis zoomRange und panRange auf [0, 0] gestellt habe, aber es funktioniert immer noch nicht.

Das Diagramm und die "Heranzoomen" funktioniert gut, aber wenn ich "verkleinern" oder wenn ich in das Diagramm schwenken, wird es gebrochen.

Hier ist, was ich bisher habe: http://jsfiddle.net/alxer/heL6uwgj/

$(function() { 

    //example data 
    var data = [{ 
    label: 'Velocity', 
    color: '#93cc67', 
    data: [ 
     [1415165113000, 0], 
     [1415165202000, 13], 
     [1415165221000, 19], 
     [1415165239000, 22], 
     [1415165254000, 23], 
     [1415165271000, 24] 
    ] 
    }]; 

    //non data-dependent options 
    var options = { 
    canvas: true, 
    series: { 
     lines: { 
     show: true 
     }, 
     points: { 
     show: true 
     } 
    }, 
    xaxis: { 
     mode: "time", 
     timezone: "browser" 
    }, 
    yaxis: {}, 
    legend: { 
     type: "canvas", 
     position: "ne" 
    }, 
    grid: { 
     clickable: true, 
     hoverable: true 
    }, 
    zoom: { 
     interactive: true 
    }, 
    pan: { 
     interactive: true, 
     cursor: "move" 
    } 
    }; 

    //calculate the min/max and ranges to set the zoom and pan limits 
    var minx = null; 
    var maxx = null; 
    var miny = null; 
    var maxy = null; 
    var numvals = 0; 
    //calculate min, max and max num of values 
    for (var a in data) { 
    for (var d in data[a].data) { 
     if ((minx === null) || (data[a].data[d][0] < minx)) minx = parseFloat(data[a].data[d][0]); 
     if ((maxx === null) || (data[a].data[d][0] > maxx)) maxx = parseFloat(data[a].data[d][0]); 
     if ((miny === null) || (data[a].data[d][1] < miny)) miny = parseFloat(data[a].data[d][1]); 
     if ((maxy === null) || (data[a].data[d][1] > maxy)) maxy = parseFloat(data[a].data[d][1]); 
    } 
    if (data[a].data.length > numvals) numvals = data[a].data.length; 
    } 
    if (minx === null) minx = 0; 
    if (maxx === null) maxx = 0; 
    if (miny === null) miny = 0; 
    if (maxy === null) maxy = 0; 
    //calculate ranges 
    var xrange = maxx - minx; 
    var yrange = maxy - miny; 
    //apply small margin 
    var auxxmargin = xrange * 0.02; 
    var auxymargin = yrange * 0.02; 
    options.xaxis.min = minx - auxxmargin; 
    options.xaxis.max = maxx + auxxmargin; 
    options.yaxis.min = miny; 
    options.yaxis.max = maxy + auxymargin; 
    //xaxis zoom range from 1 value to all values 
    options.xaxis.zoomRange = [xrange/numvals, xrange + (auxxmargin * 2)]; 
    //xaxis pan range from min value to max value 
    options.xaxis.panRange = [options.xaxis.min, options.xaxis.max]; 
    //trying to disable the yaxis zoom and pan 
    options.yaxis.zoomRange = [0, 0]; 
    options.yaxis.panRange = [0, 0]; 

    var plot = $.plot("#placeholder", data, options); 
}); 

Answer 1

zu deaktivieren Zoomen und Schwenken für eine Achse, die Optionen für panRange und zoomRange dieser Achse zu false statt [0, 0]:

options.yaxis.zoomRange = false; 
options.yaxis.panRange = false; 

Siehe die aktualisierte fiddle.