Flot导航插件 - 将缩放限制为一个轴

Question

我试图在我的flot图表中仅在x轴中启用缩放和平移,我希望yaxis保持在相同的范围内.我正在使用jQuery Flot库的导航插件.

我找不到文档或其他已解决的问题.所以我尝试通过将yaxis zoomRange和panRange设置为[0,0]来实现,但它仍然无法正常工作.

图表和"放大"工作正常,但当我"缩小"或当我在图表中平移时,它会被破坏.

这是我到目前为止所做的: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

要禁用缩放和平移一轴,设置选项panRange和zoomRange该轴的,以false代替[0, 0]:

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

看到更新的小提琴.