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

Question

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

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

图表和 "zoom in" 工作正常，但是当我 "zoom out" 或在图表中平移时，它会损坏。

这是我目前得到的：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;

查看更新后的 fiddle。

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

Flot navigate plugin - restrict zoom to one axis

javascript

jquery

zooming

flot

pan