| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- <!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() {
- Highcharts.setOptions({
- lang: {
- resetZoom: "重置",
- }
- });
- $('#container').highcharts({
- chart: {
- zoomType: 'x',
- marginTop: 70,
- backgroundColor: "rgba(0,0,0,0)",
- margin: [30, 5, 50, 50],
- marginRight: 5,
- 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: "ppm",
- 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: {
- lineWidth: 1,
- marker: {
- enabled: true, //数据点是否显示
- radius: 0.5, //数据点大小
- },
- }
- },
- series: [{
- name: "日氨气",
- data: eval($("#aqdata").val())
- }],
- });
- });
- function qtzbQc(){
- loadZnsMain("qtzb");
- if ($("#mcid").val() != null) {
- loadPtsTjt($("#mcid").val(), $("#zsid").val(), $("#lqid").val(), "qtzb");
- }
- }
- </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="aqdata" name="aqdata" value="$!aqdata" />
- <input type="hidden" value="$!type" id="type">
- <div>
- <div style="float:right"><button type="button" class="button blue" onclick="qtzbQc();" >日线</button></div>
- <div id="container" style="height: 100%; width: 100%;"></div>
- </div>
- </body>
- </html>
|
