highcharts曲线图（二）_highcharts曲线图 date.utc-优快云博客

本文链接：https://blog.youkuaiyun.com/webnoties/article/details/17219543

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>eth0网络使用状况</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 () {

var chart; // global
var d = new Date();
y = d.getFullYear();
m = d.getMonth();
dd = d.getDate();
h = d.getHours();
mm = d.getMinutes();
s =d.getSeconds();




		function requestData() {
				setTimeout(requestData, 3000);
				$.getJSON('p.php?act=rt&callback=?',displayData);

		}
		function displayData(dataJSON)
		{
			//chart.series[0].setData:function();
			var series = chart.series[0];
			var shiftt = series.data.length > 10; // shift if the series is longer than 20
			var tt = Date.parse(new Date());
			series.addPoint([dataJSON.NetOut3*1024], true, shiftt);//发送流量
			//alert(dataJSON.NetOut3);
			
			var series1 = chart.series[1];
			var shiftt1 = series1.data.length > 10; // shift if the series is longer than 20
			
			series1.addPoint([dataJSON.NetInput3*1024], true, shiftt1);//接收流量
			
		}




       chart = new Highcharts.Chart({
            chart: {
				renderTo: 'container',
                type: 'spline',
				events: {
					load: requestData
				}
            },

            title: {
                text: '网络使用状况'
            },

            xAxis: {//这块好象是限制最大长度
                type: 'datetime',
				tickPixelInterval: 150,
				maxZoom: 20 * 1000
            },
            yAxis: {
                title: {
                    text: '流量 (KB)',
                },
                min: 0,
                minorGridLineWidth: 0,
                gridLineWidth: 0,
                alternateGridColor: null,
            },
            tooltip: {
                valueSuffix: ' KB'
            },
            plotOptions: {
                spline: {
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    marker: {
                        enabled: true//需要  点吗
                    },
                    pointInterval: 3000, // 3秒 一个间隔
                   	//pointStart: Date.UTC(2009, 9, 6, 18, 0, 0)
				    //pointStart: (d.getTime()+11600)
					pointStart: Date.UTC(y, m, dd, h, mm, s)//传入当前年，月，日，时，分，秒  ，返回1970.7.1至今的秒数
                }
            },
            series: [//两个对象
				{
					name: 'eth0已发送',
					data: []
		
				}, 
				{
					name: 'eth0已接收',
					data: []
		
				}, 
				
				/*{
					name: 'etc',
					data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
						0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
						0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
						3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
				}
				*/
			]
            ,
            navigation: {
                menuItemStyle: {
                    fontSize: '10px'
                }
            }
			
			
			
        });
    });
    
	
			</script>
	</head>

	<body>

<script src="js/hc.js"></script>
<script src="js/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

	</body>
</html>

php输出json

?({"freeSpace":"38.534","TotalMemory":"1006.69 MB","UsedMemory":"928.5 MB","FreeMemory":"78.19 MB","CachedMemory":"437.4 MB","Buffers":"319.39 MB","TotalSwap":"2015.99 MB","swapUsed":"0 MB","swapFree":"2015.99 MB","loadAvg":"0.13 0.03 0.01 1\/176","uptime":"10\u592921\u5c0f\u65f614\u5206\u949f","freetime":"","bjtime":"","stime":"2013-9-23 14:33:47","memRealPercent":"17.06","memRealUsed":"171.71 MB","memRealFree":"834.98 MB","memPercent":"92.23%","memCachedPercent":"43.45","barmemCachedPercent":"43.45%","swapPercent":"0","barmemRealPercent":"17.06%","barswapPercent":"0%","NetOut2":"0","NetOut3":"0.02256","NetOut4":"","NetOut5":"","NetOut6":"","NetOut7":"","NetOut8":"","NetOut9":"","NetOut10":"","NetInput2":"0","NetInput3":"0.4609","NetInput4":"","NetInput5":"","NetInput6":"","NetInput7":"","NetInput8":"","NetInput9":"","NetInput10":""})