highcharts 圆柱图实时刷新Y轴
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://static.hcharts.cn/jquery/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="http://www.hcharts.cn/demo/js/highcharts.js"></script>
<script type="text/javascript" src="http://www.hcharts.cn/demo/js/exporting.js"></script>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
},
title: {
text: '10000号实时监控系统'
},
subtitle: {
text: '话务预测分析'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: '数值'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 20,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return '技能组:'+
this.x +'</br>值：'+ this.y +' 个';
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '排班量'
}, {
name: '话务量'
}, {
name: '接通量'
}]
};
/*
var url = "www.baidu.com";
$.ajax({
url: url,
type: "post",
cache: false,
dataType: "json",
data: {},
ifModified: false,
success: function(result){
var paiBan = [];
var huaWu = [];
var jieTong = [];
jQuery.each(result, function(m, obj) {
paiBan.push(
parseInt(obj.value0)
);
huaWu.push(
parseInt(obj.value1)
);
jieTong.push(
parseInt(obj.value2)
);
});
var y = Math.random();
options.series[0].data = y;
options.series[1].data = y;
options.series[2].data = y;
chart = new Highcharts.Chart(options);
}
});*/
setInterval(function(){
var arrays=[];
for( var i=0;i<10;i++)
{
var y = Math.random();
arrays.push(y);
}
options.series[0].data = arrays;
options.series[1].data = arrays;
options.series[2].data = arrays;
if(chart)
{
chart.series[0].setData(arrays);
chart.series[1].setData(arrays);
chart.series[2].setData(arrays);
}else
{
chart = new Highcharts.Chart(options);
}
},1000);
});
});
window.returnValue='true';
</script>
</head>
<body>
<div id="container"
style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://static.hcharts.cn/jquery/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="http://www.hcharts.cn/demo/js/highcharts.js"></script>
<script type="text/javascript" src="http://www.hcharts.cn/demo/js/exporting.js"></script>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
},
title: {
text: '10000号实时监控系统'
},
subtitle: {
text: '话务预测分析'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: '数值'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 20,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return '技能组:'+
this.x +'</br>值：'+ this.y +' 个';
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '排班量'
}, {
name: '话务量'
}, {
name: '接通量'
}]
};
/*
var url = "www.baidu.com";
$.ajax({
url: url,
type: "post",
cache: false,
dataType: "json",
data: {},
ifModified: false,
success: function(result){
var paiBan = [];
var huaWu = [];
var jieTong = [];
jQuery.each(result, function(m, obj) {
paiBan.push(
parseInt(obj.value0)
);
huaWu.push(
parseInt(obj.value1)
);
jieTong.push(
parseInt(obj.value2)
);
});
var y = Math.random();
options.series[0].data = y;
options.series[1].data = y;
options.series[2].data = y;
chart = new Highcharts.Chart(options);
}
});*/
setInterval(function(){
var arrays=[];
for( var i=0;i<10;i++)
{
var y = Math.random();
arrays.push(y);
}
options.series[0].data = arrays;
options.series[1].data = arrays;
options.series[2].data = arrays;
if(chart)
{
chart.series[0].setData(arrays);
chart.series[1].setData(arrays);
chart.series[2].setData(arrays);
}else
{
chart = new Highcharts.Chart(options);
}
},1000);
});
});
window.returnValue='true';
</script>
</head>
<body>
<div id="container"
style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>