<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height">
<title>G2 实时刷新 流量监控图</title>
<style>
::-webkit-scrollbar {
display: none;
}
html,
body {
overflow: hidden;
height: 100%;
margin: 0;
}
.m-mount {
margin: 100px 0 0 100px;
300px;
height: 50px;
}
</style>
</head>
<body>
<div id="mountNode" class="m-mount"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.8-beta.5/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.8.9/dist/data-set.min.js"></script>
<script>
$(function() {
var myAction = {},
g2Buffer = [],
g2Interval,
myChart;
$.extend(myAction, {
initChart: function() {
myChart = new G2.Chart({
container: 'mountNode',
300,
height: 50,
forceFit: false,
animate: false,
padding: [5, 5, 5, 5],
});
myChart.source([]);
myChart.axis('value', {
label: null,
tickLine: null
});
myChart.axis('year', {
label: null,
subTickCount: 3,
subTickLine: {
length: 2,
stroke: '#545454',
lineWidth: 1
},
tickLine: {
length: 2,
lineWidth: 1,
stroke: '#545454'
}
});
myChart.tooltip({
crosshairs: {
type: 'line'
}
});
myChart.area().position('year*value');
myChart.line().position('year*value').size(2);
myChart.render();
},
g2ChartData: function(data) {
var data = [];
for (var i = 0; i < 1000; i++) {
var temp = {};
temp.value = parseInt(90 * Math.random()) + 10;
data.push(temp);
}
for (var i = 0; i < data.length; i++) {
g2Buffer.push(data[i]);
}
},
g2ChartAuto: function() {
clearInterval(g2Interval);
setInterval(function() {
if (g2Buffer.length > 20) {
var temp = g2Buffer.slice(0, 20);
for (var i = 0; i < temp.length; i++) {
temp[i].year = i;
}
myChart.changeData(temp);
g2Buffer.shift();
}
}, 1000);
},
});
var init = function() {
myAction.initChart();
myAction.g2ChartData();
myAction.g2ChartAuto();
}();
})
</script>
</body>
</html>