`
san_yun
  • 浏览: 2638800 次
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

highchat 曲线图

 
阅读更多
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8"></meta>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		</meta>
		<meta
			content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
			name='viewport'>
		</meta>
		<link rel="icon" type="img/ico" href="/favicon.ico" />
		<title>EagleEye</title>
		<link href="/home/assets/vender/bs/3.3.2/css/bootstrap.min.css"
			rel="stylesheet" type="text/css" />
		<link href="/home/assets/vender/fa/4.3.0/css/font-awesome.min.css"
			rel="stylesheet" type="text/css" />
		<link href="/home/assets/vender/ionicons/2.0.1/css/ionicons.min.css"
			rel="stylesheet" type="text/css" />
		<link
			href="/home/assets/vender/adminlte/2.0.2.x/plugins/daterangepicker/daterangepicker-bs3.css"
			rel="stylesheet" type="text/css" />
		<link href="/home/assets/vender/adminlte/2.0.2.x/css/AdminLTE.min.css"
			rel="stylesheet" type="text/css" />
		<link
			href="/home/assets/vender/adminlte/2.0.2.x/css/skins/_all-skins.min.css"
			rel="stylesheet" type="text/css" />
		<link
			href="/home/assets/vender/angular-bootstrap-datetimepicker/0.3.12/datetimepicker.css"
			rel="stylesheet" type="text/css" />
		<link
			href="/home/assets/vender/datatables/extensions/fixedheader/2.1.2/dataTables.fixedHeader.css"
			rel="stylesheet" type="text/css" />
		<link
			href="/home/assets/vender/datatables/extensions/colvis/1.1.2/changed/dataTables.colVis.css"
			rel="stylesheet" type="text/css" />
		<link
			href="/home/assets/vender/datatables/1.10.6/css/dataTables.bootstrap.css"
			rel="stylesheet" type="text/css" />
		<link href="/home/assets/vender/select2/4.0.0/css/select2.min.css"
			rel="stylesheet" type="text/css" />
		<link
			href="/home/assets/vender/bootstrap3-wysiwyg/0.3.3/bootstrap3-wysihtml5.min.css"
			rel="stylesheet" type="text/css" />
		<link href="/home/assets/css/default.css?b=fakerev" rel="stylesheet"
			type="text/css" />

		<script type="text/javascript" src="/home/assets/vender/jquery/1.11.2/jquery.min.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/jquery-cookie/jquery.cookie.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/select2/4.0.0/js/select2.min.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/select2/4.0.0/js/i18n/zh-CN.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/jquery-validation/1.13.1/jquery.validate.min.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/jquery-validation/1.13.1/localization/messages_zh.min.js"></script>
		<script type="text/javascript" src="/home/assets/js/notice.js"></script>
		<script type="text/javascript" src="/home/assets/vender/uri/1.15.1/URI.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/underscore/1.8.2/underscore-min.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/highcharts/4.0.3/highcharts.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/typeahead/0.11.1/typeahead.bundle.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/react/0.13.1/react-with-addons-0.13.1.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/angularjs/1.3.14/angular.min.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/angularjs/1.3.14/angular-sanitize.min.js"></script>
		<script type="text/javascript" src="/home/assets/vender/ngreact/ngReact.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/ui-bootstrap/0.12.1/ui-bootstrap-tpls-0.12.1.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/highcharts-ng/0.0.8/highcharts-ng.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/jquery-pubsub/0.7.0/ba-tiny-pubsub.min.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/moment/2.9.0/moment-with-locales.min.js"></script>
		<script type="text/javascript" src="/home/assets/vender/bs/3.3.2/js/bootstrap.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/bootstrap3-wysiwyg/0.3.3/bootstrap3-wysihtml5.all.min.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/bootstrap3-wysiwyg/0.3.3/bootstrap-wysihtml5.zh-CN.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/adminlte/2.0.2.x/plugins/slimScroll/jquery.slimscroll.min.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/adminlte/2.0.2.x/plugins/fastclick/fastclick.min.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/adminlte/2.0.2.x/plugins/daterangepicker/daterangepicker.js"></script>
		<script type="text/javascript" src="/home/assets/vender/adminlte/2.0.2.x/js/app.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/angular-bootstrap-datetimepicker/0.3.12/datetimepicker.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/datatables/1.10.6/js/jquery.dataTables.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/datatables/extensions/table-tools/2.2.4/js/dataTables.tableTools.js"
			charset="utf-8"></script>
		<script type="text/javascript"
			src="/home/assets/vender/datatables/extensions/fixedheader/2.1.2/changed/dataTables.fixedHeader.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/datatables/extensions/colvis/1.1.2/changed/dataTables.colVis.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/datatables/1.10.6/js/dataTables.bootstrap.js"></script>
		<script type="text/javascript"
			src="/home/assets/vender/bootstrap-notify/3.0.2/bootstrap-notify.js"></script>

		<style type="text/css">
			.content-wrapper-bg {
				background-image: url(/home/assets/img/ds_background_picture.jpg);
				background-position:center;
				background-repeat: no-repeat;
				background-attachment: fixed;
			}
		</style>

		<script>
		 	$(function () {
		    $(document).ready(function () {
		        Highcharts.setOptions({
		            global: {
		                useUTC: false
		            }
		        });
		
		        $('#container').highcharts({
		        	credits: { 
            			enabled: false   //右下角不显示LOGO 
        			}, 
		            chart: {
		                type: 'area',
		                backgroundColor: 'rgba(28,69,120,1)',
		                animation: Highcharts.svg, // don't animate in old IE
		                marginRight: 1,
		                events: {
		                    load: function () {
		                        var series = this.series[0];
		                        setInterval(function () {
		                            var x = (new Date()).getTime(), // current time
		                            y = Math.random();
		                            series.addPoint([x, y], true, true);
		                        }, 60000);
		                    }
		                }
		            },
		            title: {
		                text: ''
		            },
		            xAxis: {
		                type: 'datetime'
		                
		            },
		            yAxis: {
		                title: {
		                    text: ''
		                },
		                plotLines: [{
		                    value: 0,
		                    width: 1,
		                    color: '#808080'
		                }],
		                
	                   lineWidth: 1,
	                   gridLineWidth:0,
					   minorGridLineWidth: 0
						
					   //lineColor: 'transparent',
					   //labels: {
					   //    enabled: false
					   //},
					   //minorTickLength: 0,
					   //tickLength: 0,   
							                
		            }, 
		            tooltip: {
		                formatter: function () {
		                    return '<b>' + this.series.name + '</b><br/>' +
		                        Highcharts.dateFormat('%H:%M', this.x) + '<br/>' +
		                        Highcharts.numberFormat(this.y, 2);
		                }
		            },
		            legend: {
		                enabled: false
		            },
		            exporting: {
		                enabled: false
		            },
		            series: [{
		                name: 'Random data',
		                data: (function () {
		                    // generate an array of random data
		                    var data = [];
		                    var time = (new Date()).getTime();
							time = parseInt(time/60000)*60000;
		                    for (i = -9; i <= 0; i += 1) {
		                        data.push({
		                            x: time + i * 60000,
		                            y: Math.random()
		                        });
		                    }
		                    return data;
		                }())
				            }]
				        });
				    });
				});
		</script>

	</head>

	<body class="skin-nest sidebar-collapse">
		<!-- Site wrapper -->
		<div class="wrapper ">
			<!-- Content Wrapper. Contains page content -->
			<div class="content-wrapper content-wrapper-bg">
	 		<div class="row">
					<div class="col-md-8">
						<div id="container"></div>
					</div>
			</div><!--/row -->
			</div><!-- /.content-wrapper -->
		</div><!-- ./wrapper -->
	</body>
</html>

 

分享到:
评论

相关推荐

    highchat制表

    在描述中提到的"highchat制表",可能是"highcharts"的误拼,我们在这里主要讨论Highcharts。 Highcharts是一个用于创建高质量、交互式图表的JavaScript库,它可以轻松地将各种类型的数据转换为易于理解的图形,如...

    jquery报表组件highchat的使用

    NULL 博文链接:https://xosadan.iteye.com/blog/1089452

    hightChat 统计图的实例,API

    HighChat 支持多种散点图样式,如气泡图等。`type` 设置为 `'scatter'`,`data` 数组应包含每个点的 x 坐标、y 坐标和其他属性(如大小、颜色)。 五、API 使用 HighChat 的强大之处在于其丰富的 API,可以实现动态...

    Mobile-HighChat-System

    移动HighChat系统 这是的移动插件。 信息 HighChat 是一个旧系统。 我们有一个新的聊天系统叫做 socketchat。 这比 HighChat 好,所以如果你可以在你的服务器上使用 Node.js,你最好使用 。 套接字聊天 执照 在 MIT...

    获取Highcharts图表对象的方法汇总

    获取Highcharts图表对象的方法汇总

Global site tag (gtag.js) - Google Analytics