| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- <!doctype html>
- <html>
- <head>
- <script>
- $(function() {
- $('#container').highcharts({
- chart: {
- backgroundColor: "rgba(0,0,0,0)", // 背景透明
- margin: [30, 10, 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'
- },
- tooltip: {
- valueDecimals: 1,
- valueSuffix: "Kg",
- 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())
- } ],
- });
- });
- </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 id="container" style="height: 100%; width: 100%;"></div>
- </div>
- </body>
- </html>
|
