70 lines
2.7 KiB
HTML
70 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title></title>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
<script src="/HighWay/Resources/v1_0/HighCharts/js/highcharts.js"></script>
|
|
<script src="/HighWay/Resources/v1_0/HighCharts/js/modules/exporting.js"></script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
var chart;
|
|
$(document).ready(function() {
|
|
chart = new Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'container',
|
|
type: 'line',
|
|
marginRight: 130,
|
|
marginBottom: 25
|
|
},
|
|
title: {
|
|
text: 'Monthly Average Temperature',
|
|
x: -20 //center
|
|
},
|
|
subtitle: {
|
|
text: 'Source: WorldClimate.com',
|
|
x: -20
|
|
},
|
|
xAxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
|
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: 'Temperature (°C)'
|
|
},
|
|
categories: ['0', '1', '2', '3', '4', '5',
|
|
'6', '7', '8', '9', '10', '11'],
|
|
plotLines: [{
|
|
value: 0,
|
|
width: 1,
|
|
color: '#808080'
|
|
}
|
|
]
|
|
},
|
|
tooltip: {
|
|
formatter: function() {
|
|
return '<b>'+ this.series.name +'</b><br />'+this.x +': '+ this.y +'°C'+'<br />扩展属性:'+this.point.extendRemark;
|
|
}
|
|
},
|
|
legend: {
|
|
layout: 'vertical',
|
|
align: 'right',
|
|
verticalAlign: 'top',
|
|
x: -10,
|
|
y: 100,
|
|
borderWidth: 0
|
|
},
|
|
series: [{"name":"设备1号","data":[{"y":14,"extendRemark":"08:58"},{"y":5,"extendRemark":"09:03"},{"y":4,"extendRemark":"09:09"},{"y":4,"extendRemark":"09:14"},{"y":4,"extendRemark":"09:19"},{"y":4,"extendRemark":"09:24"},{"y":4,"extendRemark":"09:29"},{"y":4,"extendRemark":"09:33"}]}]
|
|
|
|
});
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="container"></div>
|
|
</body>
|
|
</html>
|