Надеюсь, что это мой последний вопрос по этой теме.
Есть график http://jsfiddle.net/ze2gabks/
function otherRand(min, max) {
return Math.random() * (max - min) + min;
}
function graphChangeMinMax(min, max) {
var chart = $('#container').highcharts();
chart.yAxis[0].update({
min: min,
max: max
});
}
var date = new Date();
var graph_plot_line_time = Date.parse(date.getFullYear()+'.'+(date.getMonth() + 1)+'.'+date.getDate()+' '+date.getHours()+':'+(date.getMinutes() + 1)+':30');
$(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
title: {
text: ''
},
tooltip: {
backgroundColor: '#000000',
borderColor: '#000000',
animation: true,
shadow: false,
style: {
fontFamily: 'tahoma',
fontSize: '11px',
color: '#ffffff',
lineHeight: '18px'
},
formatter: function() {
return 'Время: '+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)+' <br /> Курс: '+Highcharts.numberFormat(this.y)+'';
}
},
chart: {
type: 'area',
panning: true,
marginTop: 0,
marginLeft: 0,
marginBottom: 30,
backgroundColor: '#191919',
plotBackgroundColor: '#242424',
style: {
fontFamily: 'tahoma',
fontSize: '11px'
},
events: {
load: function() {
var series = this.series[0];
setInterval(function() {
var rnd = otherRand(51.5, 51.6);
var x = (new Date()).getTime(),
y = rnd;
var min = $('#graph_min_value');
if (rnd < parseFloat(min.val())) {
min.val(rnd);
}
graphChangeMinMax(parseFloat(min.val()));
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
xAxis: {
type: 'datetime',
lineColor: '#000000',
tickInterval: 30000,
tickWidth: 0,
gridLineWidth: 1,
gridLineColor: '#414040',
min: date.getTime() - 130000,
max: date.getTime() + 130000,
labels: {
style: {
color: '#f8f8f8',
}
},
plotLines: [{
label: {
text: 'Время для покупки',
verticalAlign: 'middle',
x: 5,
style: {
color: '#ffffff',
fontSize: 12
}
},
color: '#ffffff',
width: 2,
dashStyle: 'Dash',
value: graph_plot_line_time
}, {
label: {
text: 'Закрытие сделки',
verticalAlign: 'middle',
x: 5,
style: {
color: '#c43636',
fontSize: 12
}
},
color: '#b21717',
width: 2,
value: graph_plot_line_time + 30000
}]
},
yAxis: {
gridLineColor: '#414040',
title: {text: ''},
labels: {enabled: true},
opposite: true
},
plotOptions: {
series: {
color: '#d06807',
fillOpacity: 0.6,
lineWidth: 1.6
}
},
legend: {
enabled: false
},
series: [{
name: '',
data: (function() {
var data = [],
data_y = [],
i;
for (i = -50; i <= 0; i += 1) {
var rnd = otherRand(51.5, 52);
data.push({
x: date.getTime() + i * 10000,
y: rnd
});
data_y.push(rnd);
}
var min = Math.min.apply(null, data_y);
var max = Math.max.apply(null, max);
setTimeout(function() {
graphChangeMinMax(min);
$('#graph_min_value').val(min);
}, 10);
return data;
}())
}]
});
});
#container {height: 400px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="http://isoption.com/js/chart.js" type="text/javascript"></script>
<div id="container"></div>
<input id="graph_min_value">
Как сделать, чтобы по мере рисования, график плавно сдвигался назад как тут?
Вся проблема в том, что я добавил
min: date.getTime() - 130000,
max: date.getTime() + 130000
чтобы было свободное место справа и после этого он перестал сдвигаться.
Может есть решения по проще, чтобы справа было место и не пришлось мучаться со сдвигом?