多个折线
调试运行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图形展示</title>
</head>
<body>
<div class="detail-section">
<div id="canvas">
</div>
</div>
<script src="http://g.tbcdn.cn/bui/acharts/1.0.32/acharts-min.js"></script>
<!-- https://g.alicdn.com/bui/acharts/1.0.29/acharts-min.js -->
<script type="text/javascript">
var now = new Date(),
start = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),
end = new Date(now.getFullYear(),now.getMonth(),now.getDate() + 1,0,0,0);
var interval = 60 * 1000,//1分钟
ticks = [];
for(var i = 0;i <= 24;i++ ){
ticks.push(new Date(now.getFullYear(),now.getMonth(),now.getDate(),i,0,0).getTime());
}
var chart = new AChart({
theme : AChart.Theme.SmoothBase,
id : 'canvas',
width : 950,
height : 500,
xAxis : {
type : 'time',
labels : {
renderer : function(text){
var arr = text.split(':');
return arr[0] + '时';
}
},
formatter : function(value){
var date = new Date(value);
return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
},
ticks : ticks,
tickOffset : 10
},
tooltip : {
shared : true,
crosshairs : true
},
seriesOptions : {
lineCfg : {
animate : false,
pointStart : start.getTime(),
pointInterval : interval,
line : {
'stroke-width' : 0.5
},
lineActived : {
'stroke-width' : 0.5
},
markers : {
single : true
}//不显示marker,数据量大时,动画非常卡顿
}
},
series : [ {
name: 'New York',
//type : 'column',
data: getData()
},{
name: 'beijing',
data: getData()
}]
});
function getData(){
var data = [],
i,pre;
for (i = start.getTime(); i <= now.getTime(); i = i + interval) {
var value = getRandom(pre)
data.push(value);
pre = value;
}
return data;
}
function getRandom(pre){
var r = Math.random(),
factor = r > 0.45 ? 1 : -1;
pre = pre || 100;
return pre + Math.random() * 0.5 * factor;
}
chart.render();
var series = chart.getSeries()[0],
series1 = chart.getSeries()[1];
setInterval(function() {
add(); //模拟异步请求
}, interval);
function add(){
var data = series.get('data'),
y = getRandom(data[data.length-1]);
series.addPoint(y,false,false); //第一个不重绘
var data = series1.get('data'),
y = getRandom(data[data.length-1]);
series1.addPoint(y,false,true);
}/**/
</script>
</body>
</html>