| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>时采食次数</title>
- <script type="text/javascript">
- var defaultColors = ["#3a8ecf", "#a9b2cf"];
- Highcharts.setOptions({
- colors: defaultColors,
- lang: {
- resetZoom: "重置"
- }
- });
- $(function () {
- $("#container").highcharts({
- chart: {
- type: "column",
- backgroundColor: "rgba(0,0,0,0)", // 背景颜色
- margin: [50, 10, 55, 40],
- animation: {
- duration: 1000
- }
- },
- title: {
- text: "时采食次数",
- style: {
- fontSize: 16
- }
- },
- exporting: {
- enabled: false
- },
- credits: {
- enabled: false
- },
- xAxis: {
- labels: {
- step: 2,
- rotation: 0,
- align: "center",
- style: {
- fontSize: "12px",
- }
- },
- categories: eval($("#categories").val()),
- },
- yAxis: {
- min: 0,
- title: {
- text: null
- }
- },
- legend: {
- enabled: true,
- x: 0,
- y: 13,
- align: "center",
- layout: "horizontal",
- verticalAlign: "bottom",
- floating: false,
- backgroundColor: "rgba(0,0,0,0)",
- borderColor: "#CCC",
- borderWidth: 1,
- shadow: false,
- },
- tooltip: {
- followPointer: true,
- followTouchMove: true, // 跟随手指滑动显示
- formatter: function () {
- return "<b>" + this.x + "时</b><br/>" + this.series.name +
- ": " + "<b>" + this.y + "次</b><br/>";
- }
- },
- series: [{
- name: "今天",
- data: eval($("#dataToday").val()),
- }, {
- name: "昨天",
- data: eval($("#dataYtd").val()),
- }]
- });
- });
- </script>
- </head>
- <body>
- <input type="hidden" value="$!type" id="type">
- <input type="hidden" id="categories" name="categories" value="$!categories" />
- <input type="hidden" id="dataToday" name="dataToday" value="$!dataToday" />
- <input type="hidden" id="dataYtd" name="dataYtd" value="$!dataYtd" />
- <div id="container" style="width: 100%; height: 100%;"></div>
- </body>
- </html>
|
