最近需要对流量图进行重构，
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流入流出</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x',
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
credits : {
enabled:false
},
title: {
text: ''
},
subtitle: {
text: ' <s:property value="dto.title"/>'
},
xAxis: {
gridLineWidth: 1,
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
day: '%m-%e',
hour: '%H:%M',
minute: '%H:%M'
}
},
yAxis: {
gridLineWidth: 1,
min: 0,
title: {
text: '流量'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value/1000000, 0,'','')+'Mbps';
}
}
},
legend: {
enabled: true
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%H:%M', this.x) +': '+ Highcharts.numberFormat(this.y/1000/1000, 2) +' Mbps'
}
},
plotOptions: {
area: {
color:'rgb(6,209,7)',
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, 'rgb(6,209,7)'],
[1, 'rgb(6,209,7)']
]
},
marker: {
radius: 1.5
},
lineWidth: 0,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
line: {
marker: {
radius: 1.5
},
lineWidth: 1,
color:'#2A62A9'
}
},
series: [{
type: 'area',
name: '流入',
pointInterval: 300 * 1000,
data:<s:property value="dto.ifinoctets"/>
},
{
type: 'line',
name: '流出',
pointInterval: 300 * 1000,
data: <s:property value="dto.ifoutoctets"/>
}
]
});
});
</script>
</head>
<body>
<script src="<s:url value="/js/highcharts.js"/>"></script>
<script src="<s:url value="/js/modules/exporting.js"/>"></script>
<div id="container" style="width: 610px; height: 300px; margin: 0 auto"></div>
</body>
</html>
效果如下：
