highchart 实现mrtg

最近需要对流量图进行重构，

<%@ 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>

效果如下：

 

• 
• 大小: 25.7 KB

• 
• 大小: 18.7 KB

• 查看图片附件