lrbMobileBody.htm 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>料肉比</title>
  5. <script type="text/javascript">
  6. $(function() {
  7. $("#container").highcharts({
  8. chart : {
  9. backgroundColor: "rgba(0,0,0,0)", // 背景透明
  10. margin: [30, 5, 40, 45],
  11. renderTo : "container"
  12. },
  13. colors : [ "#3a8ecf", "#f6bd0f", "#8bba00"],
  14. exporting : {
  15. enabled : false
  16. },
  17. title : {
  18. text : "料肉比",
  19. style : {
  20. fontSize : 16,
  21. },
  22. margin : 10
  23. },
  24. xAxis : {
  25. categories : eval($("#categories").val()),
  26. },
  27. yAxis : {
  28. title : {
  29. text : null
  30. },
  31. tickPixelInterval : 50,
  32. gridLineDashStyle : "longdash"
  33. },
  34. tooltip : {
  35. formatter : function() {
  36. return "<b>" + this.series.name + "</b><br/>"
  37. + "日期: <b>" + this.x + "</b><br/>"
  38. + "比例: <b>" + this.y + "</b><br/>"
  39. + "当前体重: <b>" + this.point.extra + "Kg</b>";
  40. },
  41. followTouchMove : true,
  42. shared : false,
  43. useHTML : true,
  44. crosshairs : [ {
  45. width : 2,
  46. color : "gray",
  47. dashStyle : "shortdot"
  48. }, {
  49. width : 2,
  50. color : "gray",
  51. dashStyle : "shortdot"
  52. } ]
  53. },
  54. legend : {
  55. layout : "vertical",
  56. align : "right",
  57. verticalAlign : "top",
  58. borderWidth : 0
  59. },
  60. credits : {
  61. enabled : false
  62. },
  63. plotOptions : {
  64. column : {
  65. pointPadding : 0.2,
  66. borderWidth : 0
  67. },
  68. series : {
  69. marker : {
  70. enabled : true, //数据点是否显示
  71. radius : 3.5, //数据点大小
  72. },
  73. }
  74. },
  75. series : [ {
  76. name : "总体料肉比",
  77. data : eval($("#qcdata").val())
  78. }, {
  79. name : "日料肉比",
  80. data : eval($("#rdata").val())
  81. } ],
  82. });
  83. });
  84. </script>
  85. </head>
  86. <body>
  87. <input type="hidden" id="categories" name="categories" value="$!categories" />
  88. <input type="hidden" id="qcdata" name="qcdata" value="$!qcdata" />
  89. <input type="hidden" id="rdata" name="rdata" value="$!rdata" />
  90. <input type="hidden" value="$!type" id="type">
  91. <div>
  92. <div id="container" style="height: 100%; width: 100%;"></div>
  93. </div>
  94. </body>
  95. </html>