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>
效果如下：
highchart 实现mrtg的更多相关文章
- Highchart插件下载与安装
提供完整的 Highcharts 资源包,包含实例文件.所有的 js 压缩版及源码.导出服务器文件等. 1.资源包的使用: 2.开放的CDN:http://img.hcharts.cn/ 二.High ...
- Highchart插件简介和引入方式
一.Highchart简介: Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表. Highchart ...
- 进一步封装highchart，打造自己的图表插件：jHighChart.js
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表.支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合 ...
- HighChart报表之饼图
个人认为HighChart做报表还是很不错的,从报表的样式还是性能都是很不错的选择. 1.新建一个html页面,命名为:ReportTest.html <script type="te ...
- 使用snmp+mrtg监控CPU、流量、磁盘空间、内存
1.安装snmp rpm -qa|grep snmp* //查看是否安装了snmpyum -y install snmp* //安装snmp #vim /etc/snmp/snmpd.confroco ...
- highcharts去掉右下角highchart.com和右上角的图标(三个小横杆)
去除右下角highchart.com credits: { enabled:false } 去除右上角图标 exporting: { ...
- highchart访问一次后台服务返回多张图表数据
本文承接上一篇,我们制作动态图表的时候,往往需要的不止一张图表,如果每张图表都与服务接口做一次交互的话未免太过频繁,这无论对前后还是后台都是一种压力,本文介绍一种一次访问返回多组数据的方式来减少前台与 ...
- highchart 动态刷新（可用于制作股票时时走势）
最近项目中要求获取时时的cpu动态图,利用 highchart 可以轻松实现该功能,效果可在此地址查看:动态效果 代码如下: 页面 js 引用: <script src="你项目js的 ...
- 使用 highchart 绘制柱状图的通用方法与接口
本文给出使用 highchart 绘制柱状图的通用方法与接口, 只要指定相应的数据结构和配置, 就可以直接拿来使用. 一. 数据结构与基本接口 一般绘制图形, 会涉及到较复杂的数据结构, 比如使 ...
随机推荐
- Linux企业级项目实践之网络爬虫（11）——处理http请求头
http请求头,HTTP客户程序(例如浏览器),向服务器发送请求的时候必须指明请求类型(一般是GET或者POST).如有必要,客户程序还可以选择发送其他的请求头.HTTP客户程序(例如浏览器),向服务 ...
- ［转］一步步搭建Ubuntu环境——dpkg 被中断，您必须手工运行 sudo dpkg --configure -a 解决此问题——安装Flashplayer出错 ------不错
原文网址:http://blog.csdn.net/xuezhimeng2010/article/details/8545261 解决方法如下: sudo rm /var/cache/apt/arch ...
- thinkphp分页时修改last显示标题
需要修改Page.class.php里lastSuffix为false,这样才能修改last显示标题. 然后就可以设置了 或者直接在方法中声明: $p->lastSuffix = false; ...
- jsp中iframe所包含的页面调用父页面的function方法
a.jsp中写了注册的Ext窗体loginWindow,也用iframe包含了另一个b.jsp,当在b.jsp中也有点击注册的链接,这时需要用到调用a.jsp中的loginWindow,因为如果你重新 ...
- 查看syslog-ng内存，兼容容器情况
syslog_pid=`ps -ef|grep syslog-ng|grep -v grep |awk '{print $2}'` pid_count=`ps -ef|grep syslog-ng|g ...
- Spring MVC + Spring MongoDB + Querydsl 通过maven整合实例
效果图 一共3个页面:注册页,欢迎页,用户列表页 很简单的例子,主要是为了把流程走通,没有各种验证. 注册页: 欢迎页: 用户列表页: 源码地址 https://github.com/lemonbar ...
- poj 2785 4 Values whose Sum is 0（折半枚举（双向搜索））
Description The SUM problem can be formulated . In the following, we assume that all lists have the ...
- swift 模式
原文:http://www.cocoachina.com/newbie/basic/2014/0612/8800.html 模式(pattern)代表了单个值或者复合值的结构.比如,元组(1, 2)的 ...
- EBS OAF开发中的Java 实体对象(Entity Object)验证功能补充
EBS OAF开发中的Java 实体对象(Entity Object)验证功能补充 (版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) EO理论上 ...
- JMeter简单的性能测试实例
JMeter基础之——一个简单的性能测试 我们了解了jmeter的一此主要元件,那么这些元件如何使用到性能测试中呢.这一节创建一个简单的测试计划来使用这些元件.该计划对应的测试需求. 1)测试目标网站 ...