yf_zd
/
qxzSy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<title> </title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0 , user-scalable=no" />
	<!-- bootstrap & fontawesome -->
	<script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
	<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
	<!-- <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
	<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script> -->
	<style type="text/css">
	#container{
		width:1500px;
		height: 300px;;
	}
	</style>
</head>

<body>
	<div class="content">
			<div id="container" style=""></div>
	</div>
</body>
<script>
	var data1 = [[1581893864000,44],[1582343928000,90],[1582523936000,3],[1583116061000,23]]
	var data2 = [[1581893364000,1],[1582343927000,9],[1582921936000,100],[1583111061000,200]]
	var chart = Highcharts.chart('container', {
		chart: {
			type: 'spline'
		},
		title: {
			text: '某地积雪厚度监测'
		},
		subtitle: {
			text: '非规律性时间内的变化'
		},
		xAxis: {
			type: 'datetime',
			// title: {
			// 	text: null
			// },
			dateTimeLabelFormats : {
                week : '%m/%d'
			},
			tickInterval: 7 * 24 * 3600 * 1000,
		},
		colors: ['#39F', '#000', '#036', '#000','#6CF', ],
		yAxis: {
			title: {
				text: '积雪 厚度 (m)'
			},
			min: 0
		},
		tooltip: {
			headerFormat: '<b>{series.name}</b><br>',
			pointFormat: '{point.x:%Y/%m/%e %H:%M:%S}值：{point.y} m'
		},
		plotOptions: {
			spline: {
				marker: {
					enabled: true
				}
			}
		},
		series: [{
			name: '冬',
			// Define the data points. All series have a dummy year
			// of 1970/71 in order to be compared on the same x axis. Note
			// that in JavaScript, months start at 0 for January, 1 for February etc.
			// data: [
			// 	[Date.UTC(19700927000000), -1],
			// 	[Date.UTC(1970, 9, 28), 0],
			// 	[Date.UTC(1975, 9, 29), 1],
				
			// ]
			data:data1
		},{
			name: '春',
			// Define the data points. All series have a dummy year
			// of 1970/71 in order to be compared on the same x axis. Note
			// that in JavaScript, months start at 0 for January, 1 for February etc.
			// data: [
			// 	[Date.UTC(19700927000000), -1],
			// 	[Date.UTC(1970, 9, 28), 0],
			// 	[Date.UTC(1975, 9, 29), 1],
				
			// ]
			data:data2
		}]
	});
</script>

</html>