snsdMobileBody.htm 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. .button {
  6. width: 50px;
  7. line-height: 20px;
  8. text-align: center;
  9. font-weight: bold;
  10. color: #fff;
  11. text-shadow: 1px 1px 1px #333;
  12. border-radius: 5px;
  13. margin: 0 0 0 10px;
  14. position: relative;
  15. overflow: hidden;
  16. }
  17. .button.blue {
  18. border: 0px solid #1e7db9;
  19. box-shadow: 0 1px 2px #8fcaee inset, 0 -1px 0 #497897 inset, 0 -2px 3px
  20. #8fcaee inset;
  21. background: -webkit-linear-gradient(top, #42a4e0, #2e88c0);
  22. background: -moz-linear-gradient(top, #42a4e0, #2e88c0);
  23. background: linear-gradient(top, #42a4e0, #2e88c0);
  24. }
  25. </style>
  26. <script>
  27. $(function() {
  28. $('#container').highcharts({
  29. chart: {
  30. backgroundColor: "rgba(0,0,0,0)",
  31. margin: [30, 5, 50, 40],
  32. renderTo: "container"
  33. },
  34. colors: ["#3a8ecf", "#f6bd0f","#8bba00"],
  35. exporting: {
  36. enabled: false
  37. },
  38. title: {
  39. text: "湿度全程线",
  40. style: {
  41. fontSize: 16
  42. },
  43. margin: 10
  44. },
  45. xAxis: {
  46. categories: eval($("#categories").val()),
  47. },
  48. yAxis: {
  49. title: {
  50. text: null
  51. },
  52. tickPixelInterval: 50,
  53. gridLineDashStyle: 'longdash'//Y轴网格线样式
  54. },
  55. tooltip: {
  56. valueDecimals: 1,
  57. valueSuffix: "rh",
  58. followTouchMove: true,
  59. followPointer:true,
  60. shared: true,
  61. useHTML: true,
  62. crosshairs: [ {
  63. width: 2,
  64. color: "gray",
  65. dashStyle: "shortdot"
  66. }, {
  67. width: 2,
  68. color: "gray",
  69. dashStyle: "shortdot"
  70. } ]
  71. },
  72. legend: {
  73. layout: 'vertical',
  74. align: 'right',
  75. verticalAlign: "top",
  76. borderWidth: 0
  77. },
  78. credits: {
  79. enabled: false
  80. },
  81. plotOptions: {
  82. column: {
  83. pointPadding: 0.2,
  84. borderWidth: 0
  85. },
  86. series: {
  87. marker: {
  88. enabled: true, //数据点是否显示
  89. radius: 3, //数据点大小
  90. },
  91. }
  92. },
  93. series: [ {
  94. name: "最高",
  95. data: eval($("#maxdata").val())
  96. }, {
  97. name: "最低",
  98. data: eval($("#mindata").val())
  99. }, {
  100. name: "平均",
  101. data: eval($("#pjdata").val())
  102. } ],
  103. });
  104. });
  105. function snsdR(){
  106. loadZnsMain("snsdr");
  107. if ($("#mcid").val() != null) {
  108. loadPtsTjt($("#mcid").val(), $("#zsid").val(), $("#lqid").val(), "snsdr");
  109. }
  110. }
  111. </script>
  112. </head>
  113. <body>
  114. <input type="hidden" id="mcid" name="mcid" value="$!mcid"/>
  115. <input type="hidden" id="zsid" name="zsid" value="$!zsid"/>
  116. <input type="hidden" id="lqid" name="lqid" value="$!lqid">
  117. <input type="hidden" id="categories" name="categories" value="$!categories" />
  118. <input type="hidden" id="maxdata" name="maxdata" value="$!maxdata" />
  119. <input type="hidden" id="mindata" name="mindata" value="$!mindata" />
  120. <input type="hidden" id="pjdata" name="pjdata" value="$!pjdata" />
  121. <input type="hidden" value="$!type" id="type">
  122. <div>
  123. <div style="float:right"><button type="button" class="button blue" onclick="snsdR();" >全程线</button></div>
  124. <div id="container" style="height: 100%; width: 100%;"></div>
  125. </div>
  126. </body>
  127. </html>