【前端统计图】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="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
        });
    }
    ;
});

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


<!--   柱状统计图 -->
                            <div id="main" style="width: 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;
    }
}();


原文首发://www.greatytc.com/p/582299e18c7e

文末福利:

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

image

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,376评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,126评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,966评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,432评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,519评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,792评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,933评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,701评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,143评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,488评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,626评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,292评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,896评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,494评论 2 348

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,761评论 25 707
  • Autolayout,开始于iOS6.0 一.什么时候用autolayout比较适合 1.不负责任的骑墙派说法:a...
    轻皱眉头浅忧思阅读 353评论 0 0
  • 2018年3月21星期三晴 我一无是处,今天又证明了一次。同事眼中的我是一个讲课靠灌输的,学生在吵闹中度过。难道我...
    晋锦阅读 189评论 0 0
  • 国庆假期看了日本著名作家,心理学家河合隼雄的《心的处方笺》。这本书浅显易懂,完全不同于之前看的那些烧脑的心理学书籍...
    海边的拾贝人阅读 432评论 2 3