Как в графике от highcharts сделать нормальную отрисовку?
Нужно сделать так, чтобы линии у графика рисовались нормально. Т.е:
function otherRand(min, max) {
return Math.random() * (max - min) + min;
}
$(function() {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px;"></div>http://jsfiddle.net/n6687fw9/2/ - значения разные и график рисует нормально всё, чётко видно, где значение упало, где поднялось.
Но почему-то в моей версии
function otherRand(min, max) {
return Math.random() * (max - min) + min;
}
$(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',
marginTop: 0,
marginLeft: -15,
marginRight: -15,
marginBottom: 30,
backgroundColor: '#191919',
plotBackgroundColor: '#242424',
style: {
fontFamily: 'tahoma',
fontSize: '11px'
},
events: {
load: function() {
}
}
},
xAxis: {
type: 'datetime',
lineColor: '#000000',
tickColor: '#FF0000',
tickInterval: 5000,
tickWidth: 0,
gridLineWidth: 1,
gridLineColor: '#414040',
labels: {
style: {
color: '#f8f8f8',
}
}
},
yAxis: {
gridLineColor: '#414040',
title: {
text: ''
},
labels: {
enabled: false
}
},
plotOptions: {
series: {
color: '#be610a',
fillOpacity: 0.6,
lineWidth: 1.2
}
},
legend: {
enabled: false
},
series: [{
name: '',
data: (function() {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: otherRand(51.5, 51.7)
});
}
return data;
}())
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px;"></div>http://jsfiddle.net/n6687fw9/6/ всё идёт по прямой, не смотря на то, что значения так же разные.
Почему так происходит и как сделать чтобы рисовало так же как и на первом графике?
Источник: Stack Overflow на русском