【前端统计图】hcharts实现堆叠柱形图(与后台数据交互）

原型图类似如下：

图片.png

<!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="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
        });
    }
    ;
});

==============
在项目中需要用到的：
![图片.png](https://upload-images.jianshu.io/upload_images/5640239-962155baccd310ab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


<!--   柱状统计图 -->
                            <div id="main" style=" 900px; height: 350px; margin-top:40px;"></div>



=========
sigount:
var signCount = function() {
    // 基于准备好的dom，初始化echarts实例
    var category_data // x轴信息
    var natural_data; // 正常数据
    var late_data; // 迟到数据
    var absent_data; // 未到数据
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    function fun(category_data, natural_data, late_data, absent_data) {
        myChart.setOption({
             title: {
                    text: $("#signSet option:selected").val() == '' ? $("#signSet option:eq(1)").html() : $("#signSet option:selected").html(),
                },
            color : [ '#2474f6', '#006699', '#d84a38' ],
            tooltip : {
                trigger : 'axis',
                axisPointer : { // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend : {
                data : [ '正常', '迟到', '未到' ]
            },
            grid : {
                left : '3%',
                right : '4%',
                bottom : '3%',
                containLabel : true
            },
            xAxis : [ {
                type : 'category',
                data : category_data
            } ],
            yAxis : [ {
                type : 'value'
            } ],
            series : [ {
                name : '正常',
                type : 'bar',
                data : natural_data
            },

            {
                name : '迟到',
                type : 'bar',
                data : late_data
            }, {
                name : '未到',
                type : 'bar',
                data : absent_data,

                markLine : {
                    lineStyle : {
                        normal : {
                            type : 'dashed'
                        }
                    },
                    data : [ [ {
                        type : 'min'
                    }, {
                        type : 'max'
                    } ] ]
                }
            }, ]
        });
    }
//第一次默认加载数据
    getFirstChart();
    function getFirstChart(){
    var m = parseInt(new Date().getMonth())+1;
    $.ajax({
        url : "/bison/signIn/count/toCount",
        data : {
            beginDate : new Date().getFullYear()+"-"+m+"-"+new Date().getDate(),
            endDate : new Date().getFullYear()+"-"+m+"-"+new Date().getDate(),
            countStyle : 0,
            signSetId : $("#signSet option:eq(1)").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);
        },
    });
    }
    
    // 下拉框的改变事件
    $("#countStyle").change(function() {
        if ($("#countStyle").val() == '0') {
            $("#beginTime1").show();
            $("#endTime1").show();
            $("#beginTime2").hide();
            $("#endTime2").hide();
            $("#beginTime3").hide();
            $("#endTime3").hide();
        } else if ($("#countStyle").val() == '1') {
            $("#beginTime1").hide();
            $("#endTime1").hide();
            $("#beginTime2").show();
            $("#endTime2").show();
            $("#beginTime3").hide();
            $("#endTime3").hide();
        } else {
            $("#beginTime1").hide();
            $("#endTime1").hide();
            $("#beginTime2").hide();
            $("#endTime2").hide();
            $("#beginTime3").show();
            $("#endTime3").show();
        }
    });
    // 异步加载数据
    $("#queryCount").on("click", function() {
        var numb = 0;
        var beginDate;
        var endDate;

        if ($("#signSet option:selected").val() == "") {
            layer.alert('选择签到不可以为空', {
                icon : 3
            });
            return;
        }

        // 验证年月日
        if ($("#countStyle").val() == '0') {
            numb = valicateYearMonthDate(numb);
            if (numb == 1) {
                return;
            }
            beginDate = $("#beginTime1").val();
            endDate = $("#endTime1").val();
        }

        // 验证年月
        if ($("#countStyle").val() == '1') {
            numb = valicateYearMonth(numb);
            if (numb == 1) {
                return;
            }
            beginDate = $("#beginTime2").val();
            endDate = $("#endTime2").val();
        }

        // 验证年
        if ($("#countStyle").val() == '2') {
            numb = valicateYear(numb);
            if (numb == 1) {
                return;
            }
            beginDate = $("#beginTime3").val();
            endDate = $("#endTime3").val();
        }

        // 获得后台数据
        $.ajax({
            url : "/bison/signIn/count/toCount",
            async : false,
            data : {
                beginDate : beginDate,
                endDate : endDate,
                personSex : $("#personSex").val(),
                organId : $("#organId option:selected").val(),
                organName : $("#organId option:selected").html(),
                countStyle : $("#countStyle").val(),
                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
            });
        }
        ;
    });
    

    // 验证年月日
    function valicateYearMonthDate(numb) {
        if ($("#beginTime1").val() == '') {
            layer.alert('开始日期不可为空', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if(diffDate($("#beginTime1").val()) == 0){
            layer.alert('开始日期不能超过当前日期', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if ($("#endTime1").val() == '') {
            layer.alert('结束日期不可为空', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if(diffDate($("#endTime1").val()) == 0){
            layer.alert('结束日期不能超过当前日期', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if (validateDate($("#beginTime1").val(), $("#endTime1").val())) {
            layer.alert('结束日期不得小于开始日期', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if (DateDiff($("#beginTime1").val(), $("#endTime1").val()) > 30) {
            layer.alert('按天统计日期跨距不能超过30天', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
    }

    // 验证年月
    function valicateYearMonth(numb) {
        if ($("#beginTime2").val() == '') {
            layer.alert('开始日期不可为空', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if(diffDate($("#beginTime2").val()) == 0){
            layer.alert('开始日期不能超过当前日期', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if ($("#endTime2").val() == '') {
            layer.alert('结束日期不可为空', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if(diffDate($("#endTime2").val()) == 0){
            layer.alert('结束日期不能超过当前日期', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if (validateDate($("#beginTime2").val(), $("#endTime2").val())) {
            layer.alert('结束日期不得小于开始日期', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if (MonthDiff($("#beginTime2").val(), $("#endTime2").val()) > 12) {
            layer.alert('按月统计月份跨距不得超过12个月', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
    }

    // 验证年
    function valicateYear(numb) {
        if ($("#beginTime3").val() == '') {
            layer.alert('开始日期不可为空', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if(diffDate($("#beginTime3").val()) == 0){
            layer.alert('开始日期不能超过当前日期', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if ($("#endTime3").val() == '') {
            layer.alert('结束日期不可为空', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if(diffDate($("#endTime3").val()) == 0){
            layer.alert('结束日期不能超过当前日期', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if (validateDate($("#beginTime3").val(), $("#endTime3").val())) {
            layer.alert('结束日期不得小于开始日期', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
        if (parseInt($("#endTime3").val()) - parseInt($("#beginTime3").val()) > 10) {
            layer.alert('按年统计跨距不得超过10年', {
                icon : 3
            });
            numb = 1;
            return numb;
        }
    }
    // 验证选中日期是否超过今天
    function diffDate(evalue) {
        var dB = new Date(evalue.replace(/-/, "/"))
        if (new Date() > Date.parse(dB)) {
            return 1;
        }
        return 0;
    }

    // 验证结束日期大于开始日期
    function validateDate(beginTime, endTime) {
        var bd = new Date(Date.parse(beginTime));
        var ed = new Date(Date.parse(endTime));
        return bd > ed;
    }

    // 计算两个日期之间的天数
    function DateDiff(sDate1, sDate2) { // sDate1和sDate2是2006-12-18格式
        var aDate, oDate1, oDate2, iDays
        aDate = sDate1.split("-")
        oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) // 转换为12-18-2006格式
        aDate = sDate2.split("-")
        oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
        iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) // 把相差的毫秒数转换为天数
        return iDays
    }

    // 计算两个日期之间的月数
    function MonthDiff(date1, date2) {
        date1 = date1.split('-');
        date1 = parseInt(date1[0]) * 12 + parseInt(date1[1]);
        date2 = date2.split('-');
        date2 = parseInt(date2[0]) * 12 + parseInt(date2[1]);
        var m = Math.abs(date1 - date2);
        return m;
    }
}();

原文首发：https://www.jianshu.com/p/582299e18c7e

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程

image

原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

相关阅读:
[py]戏说python面向对象细节
 [py]彻底细究web框架的wsgi+逻辑处理模块
 [py]access日志入mysql-通过flask前端展示
 [sql]mysql管理手头手册,多对多sql逻辑
 [py]requests+json模块处理api数据,flask前台展示
 [py]flask从0到1-模板/增删改查
 [wx]雪落香杉树人物关系图
 [py]资源搜集
 [py]python之信用卡ATM
【Unity技巧】开发技巧（技巧篇）
原文地址：https://www.cnblogs.com/ting6/p/9725623.html

热门文章
ZOJ-3314
POJ-3268
POJ-2594
HDU-1151
HDU-1054
HDU-4185
HDU-2389
HDU-2819
HDU-1281
[py]django上线部署-uwsgi+nginx+py3/django1.10