最近需要对流量图进行重构,
<%@ 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
highchart
用HighChart控件实现曲线图
highchart中文帮助文档
highchart api highchart api highchart api highchart api
highchart api 文档 。包含所有highchart属性。 属性结构很清晰,方便查找。
本实例源码 Highchart Demo主要讲述了使用Highchart制作图表的用法。 包括一些js配置以及接收数据格式
HighChart
matlab开发-HighChart。使用Matlab的Web浏览器可以轻松使用动态和交互式图表。
highChart gauge
highchart使用说明,附加demo代码和使用详细过程。实现动态创建、设置图表数据。
highchart源码
highchart 3 离线 API 完整版
本实例源码 Highchart Demo主要讲述了使用Highchart制作图表的用法。 包括一些js配置以及接收数据格式
本人自己封装的jquery工具类,highChart工具类。用于动态创建highChart图表对象。方便扩展,使用
highchart的一个例子
bootstrap+EasyUI+highchart中文参考手册,本人是后端开发,对前端不是很熟悉,所以在做项目的时候采用了这三个技术,因为是框架所以用起来开发前端很方便,果断选择,后端程序员也能开发出漂亮的前端页面了
highchart折线图,y轴双数据 代码详细注释,使用方便,可直接调用,可灵活布局 欢迎提出宝贵意见https://blog.csdn.net/weixin_43151418
简单的在ext的主布局里添加了highChart后台数据图表。
Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全。这里,我把Highcharts常用的最核心的参数选项配置整理成文档...