Html实时显示数据曲线（基于Highcharts ）

野性酷女 2022-09-09 15:59 275阅读 0赞

直接上源码，这个源码也是从其他地方下载的，验证可用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <TITLE>实时更新数据的jQuery图表插件DEMO演示</TITLE>
    
    
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    
    <script type="text/javascript">
    $(function () {
    $(document).ready(function() {
    	Highcharts.setOptions({
    		global: {
    			useUTC: false
    		}
    	});
    
    	var chart;
    	$('#container').highcharts({
    		chart: {
    			type: 'spline',
    			animation: Highcharts.svg, // don't animate in old IE
    			marginRight: 10,
    			events: {
    				load: function() {
    					// 在这里更新数据，最后一个参数是更新间隔
    					// set up the updating of the chart each second
    					var series = this.series[0];
    					setInterval(function() {
    						var x = (new Date()).getTime(), // current time
    							y = Math.random();
    						series.addPoint([x, y], true, true);
    					}, 10000);
    				}
    			}
    		},
    		title: {
    			text: 'CPU动态走势图--1秒2'
    		},
    		xAxis: {
    			type: 'datetime',
    			tickPixelInterval: 100
    		},
    		yAxis: {
    			title: {
    				text: 'CPU动态走势图--1秒1'
    			},
    			plotLines: [{
    				value: 0,
    				width: 1,
    				color: '#808080'
    			}]
    		},
    		tooltip: {
    			formatter: function() {
    					return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', 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 = [],
    					time = (new Date()).getTime(),
    					i;
    				// 数据在这里初始化
    				for (i = -9; i <= 0; i++) {
    					data.push({
    						x: time + i * 10000,
    						// y: 5
    						y: Math.random()
    					});
    				}
    				return data;
    			})()
    		}]
    	});
    });
    
    });
    </script>
    </HEAD>
    
    <BODY>
    <div id="status" name="status">状态信息</div>
    <div id="container" style="width:700px;height:400px;margin:0 auto;"></div>
    <div style="text-align:center;clear:both;">
    </div>
    </BODY>
    </HTML>

效果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYW5keWxhdXJlbg_size_16_color_FFFFFF_t_70_g_se_x_16][]

有个地方可以学习Highcharts。比较详细，应用够用了。

[https://www.runoob.com/highcharts/highcharts-tutorial.html][https_www.runoob.com_highcharts_highcharts-tutorial.html]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYW5keWxhdXJlbg_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/7fd29df89aa54020a2806d4ff8f6c11e.png
[https_www.runoob.com_highcharts_highcharts-tutorial.html]: https://www.runoob.com/highcharts/highcharts-tutorial.html