| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>出栏预测</title>
- <script type="text/javascript">
- var defaultColors = ["#a9b2cf", "#8bba00", "#f6bd0f", "#3a8ecf"];
- Highcharts.setOptions({
- colors: defaultColors,
- lang: {
- resetZoom: "重置"
- }
- });
- $(function () {
- $("#container").highcharts({
- chart: {
- type: "column",
- backgroundColor: "rgba(0,0,0,0)", // 背景透明
- margin: [30, 10, 70, 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: 2,
- floating: false,
- 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: true,
- },
- column: {
- stacking: "normal",
- dataLabels: {
- enabled: true, // 显示柱子上的值
- color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || "white",
- style: {
- textShadow: "0 0 3px black"
- }
- }
- }
- },
- series: [ {
- name: eval($("#name3").val()),
- data: eval($("#data4").val())
- }, {
- name: eval($("#name2").val()),
- data: eval($("#data3").val())
- }, {
- name: eval($("#name1").val()),
- data: eval($("#data2").val())
- }, {
- name: eval($("#name0").val()),
- data: eval($("#data1").val())
- } ]
- });
- });
- </script>
- </head>
- <body>
- <input type="hidden" value="$!type" id="type">
- <input type="hidden" id="categories" name="categories" value="$!categories" />
- <input type="hidden" id="name0" name="name0" value="$!name0" />
- <input type="hidden" id="name1" name="name1" value="$!name1" />
- <input type="hidden" id="name2" name="name2" value="$!name2" />
- <input type="hidden" id="name3" name="name3" value="$!name3" />
- <input type="hidden" id="data1" name="data1" value="$!data1" />
- <input type="hidden" id="data2" name="data2" value="$!data2" />
- <input type="hidden" id="data3" name="data3" value="$!data3" />
- <input type="hidden" id="data4" name="data4" value="$!data4" />
- <div id="container" style="width: 100%; height: 100%;"></div>
- </body>
- </html>
|
