マウス ポインタがグラフ エリア内に置かれると、ライブ グラフは停止します。マウスの動きに関係なく、継続的に値を表示するライブ グラフが必要です。助けてください。
コードは以下の通りです。「jsfiddle.net」をご利用ください。
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
ジャバスクリプト：
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'areaspline',
animation: true, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var seriesa = this.series[0];
var seriesb = this.series[1];
setInterval(function() {
var x1 = (new Date()).getTime(); // current time
var y1 = Math.random();
var x2 = (new Date()).getTime();
var y2 = Math.random();
seriesa.addPoint([x1, y1], true, true);
seriesb.addPoint([x2, y2], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
title: {
text: 'Time'
},
tickWidth: 1 ,
// tickWidth: 2,
type: 'datetime',
labels:
{
enabled:false
},
tickColor: '#F00',
},
yAxis: {
title: {
text: 'speed'
},
labels: {
formatter: function()
{
if(this.value < 1000)
{
return this.value +'kbps';
}
else
{
var thisvalue = this.value;
thisvalue = thisvalue/1000;
thisvalue = thisvalue.toFixed(1);
return thisvalue +' mbps';
}
},
style:{
color: '#a6a6a6',
font: '10px Arial'
}
},
plotLines: [{
value: 50,
width: 1,
color: '#808080'
}]
},
tooltip: {//WE need shared tooltip
formatter: function() {
var s = '<br>'+ this.x +'</br>';
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series[i].name +': '+
point.y +'<m>';
});
return s;
},
shared: true
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'download data',
color: '#037472',
lineWidth:2,
fillOpacity: 1,
fillColor:
{
linearGradient: [0, 0, 0, 180],
stops:
[
[0, 'rgba(123, 195, 194,1)'],
[1, 'rgba(123, 195, 194,0)'],
]
},
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -30; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
},
//2nd graph plotting
{
name: 'Upload Speed',
color: '#068cca',
lineWidth:2,
fillOpacity: 1,
fillColor: {
linearGradient: [0, 0, 0, 180],
stops:
[
[0, 'rgba(99, 204, 255,1)'],
[1, 'rgba(99, 204, 255,0)']
]
},
data:(function(){
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -30; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()*3000
});
}
return data;
})()
}
]
}); //containers end highcharts ends
});
});