| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>体重分布</title>
- <script type="text/javascript">
- var defaultColors = ["#3a8ecf", "#f6bd0f", "#f0184e"];
- Highcharts.setOptions({
- colors: defaultColors,
- lang: {
- resetZoom: "重置"
- }
- });
- $(function () {
- $("#container").highcharts({
- chart: {
- type: "column",
- backgroundColor: "rgba(0,0,0,0)", // 背景颜色
- margin: [30, 5, 50, 40],
- zoomType: "x",
- animation: {
- duration: 1000
- }
- },
- title: {
- text: "体重分布",
- style: {
- fontSize: 16
- }
- },
- exporting: {
- enabled: false
- },
- credits: {
- enabled: false
- },
- xAxis: {
- title: {
- text: null,
- },
- labels: {
- step: 5,
- rotation: 0,
- align: "center",
- style: {
- fontSize: "12px",
- }
- },
- categories: eval($("#categories").val()),
- },
- yAxis: {
- min: 0,
- title: {
- text: null
- }
- },
- legend: {
- x: 0,
- y: 15,
- align: "center",
- layout: "horizontal",
- verticalAlign: "bottom",
- floating: true,
- shadow: false,
- },
- tooltip: {
- formatter: function () {
- var s = "";
- if (this.y == $("#dataPjtz").val()) {
- s += "<b>" + "平均体重: " + this.y + "Kg</b><br/>";
- } else {
- s += "<b>" + this.x + "Kg</b><br/>" + "体重分布" + ": " +
- "<b>" + this.y + "头</b><br/>";
- }
- return s;
- }
- },
- plotOptions: {
- column: {
- events: {
- legendItemClick: function() {
- return false;
- }
- }
- },
- dataLabels: {
- enabled: false,
- rotation: 0,
- color: "#FFFFFF",
- align: "center",
- x: 0,
- y: 20,
- style: {
- fontSize: "10px",
- fontFamily: "Verdana, sans-serif",
- textShadow: "0 0 3px black"
- },
- }
- },
- series: [{
- name: "采食区一",
- data: eval($("#data").val()),
- }, {
- name: "采食区二",
- }]
- });
- });
- </script>
- </head>
- <body>
- <input type="hidden" value="$!type" id="type">
- <input type="hidden" id="categories" name="categories" value="$!categories" />
- <input type="hidden" id="data" name="data" value="$!data" />
- <input type="hidden" id="dataPjtz" name="dataPjtz" value="$!dataPjtz" >
- <div id="container" style="width: 100%; height: 100%;"></div>
- </body>
- </html>
|
