沿着x轴显示5天并进行平移

Question

我试图在x轴上只显示5个点，启用平移 - 我希望用户平移超过5的其他点。

我已经禁用了缩放，但我的问题似乎是我添加的数据越多，沿x轴的点开始尝试增加。

因此，如果我加载20点数据，而不是显示用户应该简单地平移到其他15点的5个点，则x轴“缩小”以显示尽可能多的点。

另外，如何设置起始位置？如果有20个点，并且只显示点数，如何将视图设置为从10点到15点开始，那么用户将返回前10个点，并向前移动剩下的5个点？

Answer 1

将这些选项用于x轴：

xaxis: {
  panRange: [0, 20],
  min: 5,
  max: 10
}

panRange定义要平移的范围的边框，并min & max定义起始范围。

编辑：您可以使用刻度线指定数组：

  var ticks = [
    [1, 'one'],
    [2, 'two'],

并像这样使用它：

    xaxis: {
      ...
      ticks: ticks,

请参阅下面的代码段以获取完整示例：

＆＃13;

＆＃13;

$(function() {

  var data = [
    [1, 2],
    [2, 3],
    [3, 1],
    [4, 4],
    [5, 2],
    [6, 3],
    [7, 3],
    [8, 2],
    [9, 1],
    [10, 1],
    [11, 3],
    [12, 4],
    [13, 2],
    [14, 2],
    [15, 4],
    [16, 3],
    [17, 3],
    [18, 1],
    [19, 4]
  ];
  
  var ticks = [
    [1, 'one'],
    [2, 'two'],
    [3, 'three'],
    [4, 'four'],
    [5, 'five'],
    [6, 'six'],
    [7, 'seven'],
    [8, 'eight'],
    [9, 'nine'],
    [10, 'ten'],
    [11, 'eleven'],
    [12, 'twelve'],
    [13, 'thirteen'],
    [14, 'fourteen'],
    [15, 'fifteen'],
    [16, 'sixteen'],
    [17, 'seventeen'],
    [18, 'eighteen'],
    [19, 'nineteen']
  ];

  var options = {
    series: {
      points: {
        show: true
      },
      lines: {
        show: true
      }
    },
    xaxis: {
      panRange: [0, 20],
      min: 5,
      max: 10,
      ticks: ticks,
      tickDecimals: 0
    },
    yaxis: {
      panRange: [0, 5],
      min: 0,
      max: 5,
      tickDecimals: 0
    },
    zoom: {
      interactive: false
    },
    pan: {
      interactive: true
    }
  };

  var plot = $.plot('#placeholder', [data], options);

});

＆＃13;

#placeholder {
  width: 400px;
  height: 300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.navigate.js"></script>
<div id="placeholder"></div>

＆＃13;

＆＃13;

＆＃13;