| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- <!doctype html>
- <html>
- <head>
- <style type="text/css">
- .button {
- width: 50px;
- line-height: 20px;
- text-align: center;
- font-weight: bold;
- color: #fff;
- text-shadow: 1px 1px 1px #333;
- border-radius: 5px;
- margin: 0 0 0 10px;
- position: relative;
- overflow: hidden;
- }
- .button.blue {
- border: 0px solid #1e7db9;
- box-shadow: 0 1px 2px #8fcaee inset, 0 -1px 0 #497897 inset, 0 -2px 3px #8fcaee inset;
- background: -webkit-linear-gradient(top, #42a4e0, #2e88c0);
- background: -moz-linear-gradient(top, #42a4e0, #2e88c0);
- background: linear-gradient(top, #42a4e0, #2e88c0);
- }
- </style>
- <script>
- $(function() {
- $('#container').highcharts({
- chart : {
- backgroundColor: "rgba(0,0,0,0)",
- margin: [30, 5, 50, 45],
- renderTo : "container"
- },
- colors : [ "#3a8ecf", "#f6bd0f", "#8bba00" ],
- exporting : {
- enabled : false
- },
- title : {
- text : "温度全程线",
- style : {
- fontSize : 16
- },
- margin : 10
- },
- xAxis : {
- categories : eval($("#categories").val()),
- },
- yAxis : {
- title : {
- text : null
- },
- tickPixelInterval : 50,
- gridLineDashStyle : 'longdash'//Y轴网格线样式
- },
- tooltip : {
- valueDecimals : 2,
- valueSuffix : "℃",
- followTouchMove : true,
- followPointer : true,
- shared : true,
- useHTML : true,
- crosshairs : [ {
- width : 2,
- color : "gray",
- dashStyle : "shortdot"
- }, {
- width : 2,
- color : "gray",
- dashStyle : "shortdot"
- } ]
- },
- legend : {
- layout : 'vertical',
- align : 'right',
- verticalAlign : "top",
- borderWidth : 0
- },
- credits : {
- enabled : false
- },
- plotOptions : {
- column : {
- pointPadding : 0.2,
- borderWidth : 0
- },
- series : {
- marker : {
- enabled : true, //数据点是否显示
- radius : 3, //数据点大小
- },
- }
- },
- series : [ {
- name : "最高",
- data : eval($("#maxdata").val())
- }, {
- name : "最低",
- data : eval($("#mindata").val())
- }, {
- name : "平均",
- data : eval($("#pjdata").val())
- } ],
- });
- });
- function snwdR() {
- loadZnsMain("snwdr");
- if ($("#mcid").val() != null) {
- loadPtsTjt($("#mcid").val(), $("#zsid").val(), $("#lqid").val(), "snwdr");
- }
- }
- </script>
- </head>
- <body>
- <input type="hidden" id="mcid" name="mcid" value="$!mcid"/>
- <input type="hidden" id="zsid" name="zsid" value="$!zsid"/>
- <input type="hidden" id="lqid" name="lqid" value="$!lqid">
- <input type="hidden" id="categories" name="categories" value="$!categories" />
- <input type="hidden" id="maxdata" name="maxdata" value="$!maxdata" />
- <input type="hidden" id="mindata" name="mindata" value="$!mindata" />
- <input type="hidden" id="pjdata" name="pjdata" value="$!pjdata" />
- <input type="hidden" value="$!type" id="type">
- <div>
- <div style="float:right"><button type="button" class="button blue" onclick="snwdR();" >全程线</button></div>
- <div id="container" style="height: 100%; width: 100%;"></div>
- </div>
- </body>
- </html>
|
