Question

我有一张包含三条线的Highstock图表。当我添加数据时，它将在半常规情况下让最大范围句柄从右侧移开，然后保持放置而不是按预期粘在右侧。不希望出现这种情况。

在它滑倒之前：滑倒后：

我做了一个简化的例子 https://jsfiddle.net/eskil_saatvedt/rdwdbht1/3/

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

的Javascript

$(function() {

  Highcharts.setOptions({
    global: {
      useUTC: false
    }
  });

  // Create the chart
  $('#container').highcharts('StockChart', {
    chart: {
        type: 'line',
    },

    rangeSelector: {
      buttons: [{
        count: 1,
        type: 'minute',
        text: '1M'
      }, {
        count: 5,
        type: 'minute',
        text: '5M'
      }, {
        type: 'all',
        text: 'All'
      }],
      inputEnabled: false,
      selected: 2
    },

    title: {
      text: 'Live random data'
    },

    exporting: {
      enabled: false
    },

    series: [{
      name: 'Random data',
      data: (function() {
        // generate an array of random data
        var data = [],
          time = (new Date()).getTime();
        data.push([
          time +1 * 1000,
          Math.round(Math.random() * 100)
        ]);

        return data;
      }())
    },
    {
      name: 'Random data2',
      data: (function() {
        // generate an array of random data
        var data = [],
          time = (new Date()).getTime();
        data.push([
          time +1 * 1000,
          Math.round(Math.random() * 100)
        ]);

        return data;
      }())
    },
    {
      name: 'Random data3',
      data: (function() {
        // generate an array of random data
        var data = [],
          time = (new Date()).getTime();
        data.push([
          time +1 * 1000,
          Math.round(Math.random() * 100)
        ]);

        return data;
      }())
    }
    ]
  });

});

function UpdateData() {
  var chart = $('#container').highcharts();
  var x = (new Date()).getTime(), // current time
    y = Math.round(Math.random() * 100),
    k = Math.round(Math.random() * 100)+50,
    z = Math.round(Math.random() * 100)+20;
  chart.series[0].addPoint([x, y], false, false);
  chart.series[1].addPoint([x, z], false, false);
  chart.series[2].addPoint([x, k], false, false);
  chart.redraw();
}

setInterval(function() {
  UpdateData();
}, 1000);

通常我会显示2个温度和增益，用它来进行室内热量控制。

Answer 1

在使用新范围添加点之后，您需要调用setExtremes（）]（http://api.highcharts.com/highcharts#Axis.setExtremes）函数。

function UpdateData() {
  var chart = $('#container').highcharts(),
  min = chart.xAxis[0].dataMin,
  max = chart.xAxis[0].dataMax,
  x = (new Date()).getTime(), // current time
    y = Math.round(Math.random() * 100),
    k = Math.round(Math.random() * 100) + 50,
    z = Math.round(Math.random() * 100) + 20;
  chart.series[0].addPoint([x, y], false, false);
  chart.series[1].addPoint([x, z], false, false);
  chart.series[2].addPoint([x, k], false, false);

  chart.xAxis[0].setExtremes(min,x);
}

实施例： - https://jsfiddle.net/xh1sjk3L/

Answer 2

感谢塞巴斯蒂安。

通过使用max = chart.xAxis [0] .userMax我能够将最大值设置为max，如果它接近边。在示例1秒

function UpdateData() {
  var chart = $('#container').highcharts();

  var userMax = chart.xAxis[0].userMax; // <- change

  var x = (new Date()).getTime(), // current time
    y = Math.round(Math.random() * 100),
    k = Math.round(Math.random() * 100)+50,
    z = Math.round(Math.random() * 100)+20;
  chart.series[0].addPoint([x, y], false, false);
  chart.series[1].addPoint([x, z], false, false);
  chart.series[2].addPoint([x, k], false, false);  
  chart.redraw(); // Redraw it again, as the left handle position I want is most often correct after the redraw.

// ----- change --------
  var deltaX = x - userMax;
  if (deltaX < 1000){ // the handle was closer to the end than 1 second
    chart.xAxis[0].setExtremes(chart.xAxis[0].min,x);
  } 
}

如何防止Highstock右侧范围句柄在添加数据时保持从最大值滑落

2 个答案: