hcharts实现堆叠柱形图

来源：互联网发布：usb2.0高速端口和3.0 编辑：程序博客网时间：2024/05/20 13:37
<!DOCTYPE ><html>    <head>        <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">        <meta name="viewport" content="width=device-width, initial-scale=1">        <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>    </head>    <body>        <div id="container" style="width:800px;height:400px"></div>        <script>$(function () {    $('#container').highcharts({        chart: {            type: 'column'        },        title: {            text: '堆叠柱形图'        },        xAxis: {            categories: ['三年级一班', '三年级二班', '三年三班', '三年级四班', '三年级五班']        },        yAxis: {            min: 0,            title: {                text: ''            },            stackLabels: {                enabled: true,                style: {                    fontWeight: 'bold',                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'                }            }        },        legend: {            align: 'right',            x: -30,            verticalAlign: 'top',            y: 25,            floating: true,            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',            borderColor: '#CCC',            borderWidth: 1,            shadow: false        },        tooltip: {            formatter: function () {                return '<b>' + this.x + '</b><br/>' +                    this.series.name + ': ' + this.y + '<br/>' +                    '总量: ' + this.point.stackTotal;            }        },        plotOptions: {            column: {                stacking: 'normal',                dataLabels: {                    enabled: true,                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',                    style: {                        textShadow: '0 0 3px black'                    }                }            }        },        series: [{            name: '未到',            data: [1, 1, 2, 1, 2]        }, {            name: '迟到',            data: [2, 2, 3, 2, 1]        }, {            name: '已到',            data: [8, 9, 10, 11, 12]        }]    });});        </script>    </body></html>异步加载数据// 异步加载数据$("#queryCount").on("click", function() {    var numb = 0;    numb = validate(numb);    if (numb == 1) {        return;    }    $.ajax({        url : "/bison/signIn/count/countOrgan",        async : false,        data : {            beginDate : $("#beginTime").val(),            endDate : $("#endTime").val(),            personSex : $("#personSex").val(),            organIds : getOrganIds(),            signSetId : $("#signSet option:selected").val(),        },        type : 'POST',        dataType : 'json',        success : function(data) {            // 成功时执行的回调方法            category_data = data.returnData.response.categor;            natural_data = data.returnData.response.normalList;            late_data = data.returnData.response.lateList;            absent_data = data.returnData.response.absentList;            fun(category_data, natural_data, late_data, absent_data);        },        error : erryFunction    // 错误时执行方法    });    function erryFunction() {        layer.alert('请联系超管，数据返回失败', {            icon : 3        });    }    ;});
阅读全文
0 0