| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- <!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)", // 背景颜色
- marginTop: 30,
- marginRight: 10,
- marginBottom: 55,
- 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: {
- 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 + "Kg</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>
|
