Question

有没有办法让滚动保持最右边？我正在尝试在高清图上进行实时更新，似乎有时我遇到滚动被遗忘。

$(function() {

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

 // Create the chart
$('#container').highcharts('StockChart', {
chart: {
  events: {
    load: function() {

      // set up the updating of the chart each second
      var series = this.series[0],
        hasPlotLine = false,
        $button = $('#button'),
        chart = $('#container').highcharts(),
        yAxis = chart.yAxis[0],
        plotLine,
        d,
        newY;

      yAxis.addPlotLine({
        value: 66,
        color: 'red',
        width: 2,
        id: 'plot-line-1',
                    label: {
                text: 66,
                align: 'right',
                y: newY,
                x: 0
            }
      });

      setInterval(function() {

        var x = (new Date()).getTime(), // current time
          y = Math.round(Math.random() * 100);
        series.addPoint([x, y], true, true);

        plotLine = yAxis.plotLinesAndBands[0].svgElem;

        d = plotLine.d.split(' ');

        newY = yAxis.toPixels(y) - d[2];

        plotlabel = yAxis.plotLinesAndBands[0].label;

                    plotlabel.animate({
            translateY:newY,
                        text:y
        },400),   


        plotLine.animate({
          translateY: newY
        }, 400);


      }, 1000);
    }
  }
},

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

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(),
      i;

    for (i = -999; i <= 0; i += 1) {
      data.push([
        time + i * 1000,
        Math.round(Math.random() * 100)
      ]);
    }
    return data;
  }())
}]

});

});

我知道解释我的担忧有点难，但请查看此图片

我有搜索setExtremes但我不确定它是如何工作的，或者如果这是我正在寻找的功能，它将如何设置在未来的日期。

这是jsfiddle http://jsfiddle.net/kttfv1h3/3/

感谢您的帮助

Answer 1

setExtremes（）将有效 - 请参阅API this。

您需要调整的唯一值是最小值 - 您可以从最后一个点计算它或设置一些固定值。

xAxis.setExtremes(x - 1000 * 60, x)

示例：http://api.highcharts.com/highcharts/Axis.setExtremes

将Scroll保持在正确的Highchart上

1 个答案: