cxc
/
ifm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							<!DOCTYPE HTML>
<html>
<head>
<title>日采食次数</title>
<script type="text/javascript">
var defaultColors = ["#f0184e", "#8bba00", "#f6bd0f", "#3a8ecf"];
Highcharts.setOptions({
	colors: defaultColors,
	lang: {
		resetZoom: "重置"
	}
});
$(function () {
	$("#container").highcharts({
		chart: {
			type: "column",
			backgroundColor: "rgba(0,0,0,0)", // 背景透明
			margin: [30, 10, 75, 45],
			animation: {
				duration: 1000
			}
		},
		title:{
			text: "日采食次数",
			style: {
				fontSize: 16
			}
		},
		exporting: {
			enabled : false
		},
		credits: {
			enabled : false
		},
		xAxis : {
			title: {
				text: null
			},
			labels: {
				rotation: -45
			},
			categories: eval($("#categories").val())
		},
		yAxis : {
			title : {
				text: null
			},
			stackLabels: {
				enabled: false,
				style: {
					fontWeight: "bold",
					color: (Highcharts.theme && Highcharts.theme.textColor) || "black",
				}
			}
		},
		legend : {
			x: 0,
			y: 13,
			align: "center",
			layout: "horizontal",
			verticalAlign: "bottom",
			itemDistance: 5,
			floating: true,
			backgroundColor: "rgba(0,0,0,0)",
			borderColor: "#CCC",
			borderWidth: 1,
			shadow: false,
			reversed: true
		},
		tooltip : {
			backgroundColor: "#FFFFFF",
			shared: true,
			useHTML: true,
			formatter: function () {
				var s = "<b>" + this.x + "日" + "</b><br/>";
				for(var i = 0 ;i < this.points.length; i++) {
					s += this.points[i].series.name + ": " + "<b>" + this.points[i].y + "次" + "</b><br/>";
				}
				return s;
			},
		},
		plotOptions : {
			series: {
				animation: false,
			},
			column : {
				stacking: "normal",
				dataLabels : {
					enabled: true, // 显示柱子上的值
					color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || "white",
					style: {
						textShadow: "0 0 3px black",
					}
				}
			}
		},
		series : [ {
			name: "平均访问",
			data: eval($("#dataPjfws").val())
		}, {
			name: "隔离区",
			data: eval($("#dataGlq").val())
		}, {
			name: "采食区二",
			data: eval($("#dataCsq2").val())
		}, {
			name: "采食区一",
			data: eval($("#dataCsq1").val())
		} ]
	});
});
</script>
</head>
<body>
	<input type="hidden" value="$!type" id="type">
	<input type="hidden" id="categories" name="categories" value="$!categories" />
	<input type="hidden" id="dataCsq1" name="dataCsq1" value="$!dataCsq1" />
	<input type="hidden" id="dataCsq2" name="dataCsq2" value="$!dataCsq2" />
	<input type="hidden" id="dataGlq" name="dataGlq" value="$!dataGlq" />
	<input type="hidden" id="dataPjfws" name="dataPjfws" value="$!dataPjfws" />
	<div id="container" style="width: 100%; height: 100%;"></div>
</body>
</html>