Как предотвратить попадание ручки Highstock в правый диапазон с максимальным значением при добавлении данных

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); 
    } 
}