HighCharts报表之条形统计图

<title>机构推送资源数据分析(有效性)</title>
    <script src="../../js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../js/highcharts.js" type="text/javascript"></script>
    <script src="../../js/exporting.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var chart;
            $(document).ready(function () {
                chart = new Highcharts.Chart({
                    //与DIV-container绑定数据
                    chart: {
                        renderTo: 'container'
                    },
                    //报表的标题
                    title: {
                        text: '资源数据分析',
                        x: -20
                    },
                    //副标题
                    subtitle: {
                        text: '数据有效性、无效性分析',
                        x: -20
                    },
                   //X轴数据和样式设置
                    xAxis: {
                    labels:{
                     rotation:-35, //倾斜度
                    align:'right'},
                        categories: [<%=xValue %>]  //数据
                    },
                    //Y轴数据，Y轴的坐标值不用设置，HighCharts会根据我们的数据值自动建立比例
                    yAxis: {
                        title: { text: '所占比例(%)' }
                    },
                   //显示在报表每个节点上的值，如条形图的上方
                   plotOptions: {
                     //column定义为条形图上方  line定义为折线图上方
                     column: { 
                            dataLabels: {
                             enabled: true,
                             style: {
                              fontSize: '12',
                              color:'red'
                              },
                             formatter: function() {
                                  return this.y +'%';
                            }
                        }
                      }
                    },
                   //toolTip用于当鼠标放在对应节点上的数据
                    tooltip: {
                        formatter: function () {
                            var s;
                            if (this.point.name) {
                                s = '' +
                            this.point.name + ': ' + this.y;
                            } else {
                                s = '' +
                            this.x + ': ' + this.y + '%';
                            }
                            return s;
                        }
                    },
                    //以饼状图显示数据的总的比例时的标题信息
                    labels: {
                        items: [{
                            html: '总的比例',
                            style: {
                                left: '0px',
                                top: '30px',
                                color: 'black'
                            }
                        }]
                    },
                  //将右下角的highcharts.com禁用，也可以自定义设置值如credits:{href='#',text:'xx'}
                    credits:{
                        enabled:false
                    },
                   //对应的X轴上的数据和对应的比例值从后台方法获取数据
                    series: [{
                        type: 'column',
                        name: '有效性(%)',
                        color:'green',
                        data: [<%=validateValue %>] //从后台获取数据
                    }, {
                        type: 'column',
                        name: '无效性(%)',
                        color:'red',
                        data: [<%=inValidateValue %>]//从后台获取数据
                    }, {
                        type: 'pie', //饼状图
                        name: '总的比例',
                        data: [{
                            name: '总的无效次数(次)',
                            y: <%=ivd %>,
                            color: 'red'
                        }, {
                            name: '总的有效次数(次)',
                            y: <%=vd %>,//从后台获取数据
                            color: 'green'
                        }],
                        center: [0, -15], //相对位置
                        size: 80,//饼的大小
                        showInLegend: false,
                        dataLabels: {
                            enabled: false
                        }
                    }]
                });
            });
        });
    </script>
</head>
<body>
    <form>
    <div id="container" style="min-width: 400px; height: 500px; margin: 0 auto; margin-top:25px;">
    </div>
    <div style="margin-left:10px; position:absolute; margin-top:-60px; color: #000000; z-index:2000px; font-size: 12px;">
        资源名称
    </div>
    </form>
</body>