highcharts实现实时动态的折线面积图

最新推荐文章于 2025-05-17 19:53:12 发布

原创最新推荐文章于 2025-05-17 19:53:12 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

myWork-- 专栏收录该内容

59 篇文章

订阅专栏

首先去highcharts官网下载highcharts.js

1，HTML

<!DOCTYPE>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<link href="../css/sheet.css" type="text/css" rel="stylesheet" />
		<script src="../js/jquery-1.8.1.min.js"></script>
		<script src="../js/controlPanel/highcharts.js"></script>
		<script src="../js/controlPanel/sheet.js"></script>
		<style>
			#container {
				background: transparent !important;
				fill: transparent !important;
			}
			
			. highcharts-background {
				fill: transparent !important;
			}
			
			#highcharts-0 rect {
				fill: transparent !important;
			}
			
			
		</style>
		<script src="./js/jquery-1.11.1.min.js"></script>
	</head>

	<body>
		<div id="content">
			<div class="line">
				<div class="content-canvas">
					<div id="container" style="width: 100%; height:100%; "></div>
				</div>
			</div>
			
		</div>
		
	</body>

</html>

2，js

$(document).ready(function() {
				Highcharts.setOptions({
					global: {
						useUTC: false
					},
					colors: "#F8D366,#A4DB81".split(","),
					symbols: ["circle", "triangle"]
				});
				var options = {
					chart: {
						renderTo: 'container',
						type: 'area',
						marginRight: 10,
						events: {
							load: function() {
								// set up the updating of the chart each second
								// var series = this.series[0];
								$.each(this.series, function(idx, series) {
									setInterval(function() {
										var x = (new Date()).getTime(), // current time
											y = Math.random();
										series.addPoint([x, y], true, true);
									}, 1000);
								});
							}
						}
					},
					title: {
						text: ''
					},
					subtitle: {
						text: "Intel(R) Core (TM) i5-3230M CPU@2.60Ghz",
						align:'right',
						color:'#666'
					},
					credits: {
						enabled: false
					},
					exporting: { //Highcharts 图表导出功能模块。
						enabled: false
					},
					xAxis: {
						type: 'datetime',
						tickPixelInterval: 80,
						 gridLineWidth: 0,//Y
						// tickwidth:0,
					},
					yAxis: {
						title: {
							text: 'Kbps'
						},
						 gridLineWidth: 0,//隐藏点横线
						startOnTick: true, //为true时，设置min才有效
						min: 0,
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
							return '<b>' + this.series.name + '</b><br/>' +
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + '<span style="color:#08c">' +
								Highcharts.numberFormat(this.y, 2) + ' Kbps' + '</span>';
						}
					},
					legend: {
						enabled: true
					},
					exporting: {
						enabled: false
					},
					//禁止图例点击
					plotOptions: {
						series: {
							events: {
								legendItemClick: function(e) {
									return false; // 直接 return false 即可禁用图例点击事件
								}
							},
							marker:{
								enabled:false
							}
						}
					},
					series: [{
						name: ' ',
						data: (function() {
							// generate an array of random data
							var data = [],
								time = (new Date()).getTime(),
								i;
							for (i = -19; i <= 0; i++) {
								data.push({
									x: time + i * 1000,
									y: Math.random()
								});
							}
							return data;
						})()
					}]
				};
				chart = new Highcharts.Chart(options);
			});