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

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

highchart 实现mrtg的更多相关文章

  1. Highchart插件下载与安装

    提供完整的 Highcharts 资源包,包含实例文件.所有的 js 压缩版及源码.导出服务器文件等. 1.资源包的使用: 2.开放的CDN:http://img.hcharts.cn/ 二.High ...

  2. Highchart插件简介和引入方式

    一.Highchart简介: Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表. Highchart ...

  3. 进一步封装highchart，打造自己的图表插件：jHighChart.js

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表.支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合 ...

  4. HighChart报表之饼图

    个人认为HighChart做报表还是很不错的,从报表的样式还是性能都是很不错的选择. 1.新建一个html页面,命名为:ReportTest.html <script type="te ...

  5. 使用snmp+mrtg监控CPU、流量、磁盘空间、内存

    1.安装snmp rpm -qa|grep snmp* //查看是否安装了snmpyum -y install snmp* //安装snmp #vim /etc/snmp/snmpd.confroco ...

  6. highcharts去掉右下角highchart.com和右上角的图标(三个小横杆)

    去除右下角highchart.com credits: {                enabled:false            } 去除右上角图标 exporting: {         ...

  7. highchart访问一次后台服务返回多张图表数据

    本文承接上一篇,我们制作动态图表的时候,往往需要的不止一张图表,如果每张图表都与服务接口做一次交互的话未免太过频繁,这无论对前后还是后台都是一种压力,本文介绍一种一次访问返回多组数据的方式来减少前台与 ...

  8. highchart 动态刷新（可用于制作股票时时走势）

    最近项目中要求获取时时的cpu动态图,利用 highchart 可以轻松实现该功能,效果可在此地址查看:动态效果 代码如下: 页面 js 引用: <script src="你项目js的 ...

  9. 使用 highchart 绘制柱状图的通用方法与接口

    本文给出使用 highchart 绘制柱状图的通用方法与接口, 只要指定相应的数据结构和配置, 就可以直接拿来使用. 一.  数据结构与基本接口   一般绘制图形, 会涉及到较复杂的数据结构, 比如使 ...

随机推荐

  1. 为什么Nginx的性能要比Apache高很多？

    为什么Nginx的性能要比Apache高很多? 这得益于Nginx使用了最新的epoll(Linux 2.6内核)和kqueue(freebsd)网络I/O模型,而Apache则使用的是传统的sele ...

  2. mysql 1449 ： The user specified as a definer (&#39;root&#39;@&#39;%&#39;) does not exist 解决方法

    权限问题,授权 给 root  全部sql 权限 mysql> grant all privileges on *.* to root@"%" identified by & ...

  3. Cocos2d-x学习笔记（3）

    Cocos2d-x有一个包括全部其它头文件的cocos2d.h,仅仅要在使用时包括这个头文件,就能够使用引擎的全部功能.Cocos2d-x的类都放置于cocos2d的命名空间下,如引擎下的" ...

  4. 【计算机视觉】基于行为的ReID演示

    帮老师做了一个简单的基于行为(主要是步态)的ReID问题的Demo,效果例如以下图: 以下是提取的集中特征,前三个都是GEI系的,后几个是基于光流场的.然后右边是识别出的几个对象的排序,由于没有角度和 ...

  5. [Redux] Redux: Extracting Container Components -- AddTodo

    Code to be refactored: const AddTodo = ({ onAddClick }) => { let input; return ( <div> < ...

  6. atitit。自己定义uml MOF EMF体系eclipse emf 教程o7t

    atitit.自己定义uml MOF EMF体系eclipse emf  教程o7t 1. 元对象机制(MOF,Meta-Object Facility)and  结构 1 2. 元模型图.模型图.对 ...

  7. js点击打开弹窗

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. Kerberos-KDC

    Kerberos提供一种较好的解决方案,它是由MIT发明的,Kerberos建立了一个安全的.可信任的密钥分发中心(KDC, Key Distribution Center).Kerberos是一种认 ...

  9. easyui-combobox默认值绑定

    $('#combox_role').combobox({ panelHeight: , url: '../../Handler/GetComboxItems.ashx?type=0', valueFi ...

  10. JS高级程序设计学习笔记之基本包装类型

    概述 基本类型:string.boolean.number 每当读取一个基本类型的值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据. 使用new操作符创建的 ...