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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值