| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <!doctype html>
- <html>
- <head>
- <title>日增长</title>
- <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, 10, 75, 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: 0,
- valueSuffix: "g",
- 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($("#csq1data").val())
- }, {
- name: "采食区二",
- data: eval($("#csq2data").val())
- }, {
- name: "整 体",
- data: eval($("#ztdata").val())
- } ],
- });
- });
- function rzzR(){
- loadZnsMain("rzzr");
- }
- </script>
- </head>
- <body>
- <input type="hidden" id="categories" name="categories" value="$!categories" />
- <input type="hidden" id="csq1data" name="csq1data" value="$!csq1data" />
- <input type="hidden" id="csq2data" name="csq2data" value="$!csq2data" />
- <input type="hidden" id="ztdata" name="ztdata" value="$!ztdata" />
- <input type="hidden" value="$!type" id="type">
- <div>
- <div style="float:right"><button type="button" class="button blue" onclick="rzzR();" >全程线</button></div>
- <div id="container" style="height: 100%; width: 100%;"></div>
- </div>
- </body>
- </html>
|
