hcharts实现堆叠柱形图

<!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 条评论
登录 后参与评论

相关文章

来自专栏移动端开发

Swift 2.0 自定义cell和不同风格的cell

      昨天我们写了使用系统的cell怎样创建tableView,今天我们再细分一下,就是不同风格的cell,我们怎写代码。先自己创建一个cell,继承于U...

19860
来自专栏bboysoul

linux下的彩蛋和各种有趣的命令

循环输出 for ((i=1;i<=30;i++));do linux_logo -f -L $i;sleep 0.1;done

16940
来自专栏TechBox

iOS开发之UICollectionViewController系列(二) :详解CollectionView各种回调

26940
来自专栏帘卷西风的专栏

关于cocos2dx之lua使用TableView

在手机游戏的开发中,滚动是一项非常重要的操作,而cocos2dx中使用的最广泛的就属于TableView了,不过由于cocos2dx的接口比较晦涩,所以需要一...

19220
来自专栏一“技”之长

iOS使用UIImagePickerController调用系统相机、相册与图库

        UIImagePickerController是系统封装好的一个导航视图控制器,使用其开发者可以十分方便的进行相机相册相关功能的调用。UIIma...

29210
来自专栏xingoo, 一个梦想做发明家的程序员

ping 实现设计---ICMP

发送ICMP报文时,必须程序自己计算校验和,将它填入ICMP头部对应的域中。 校验和的计算方法:   将数据以字为单位累加到一个双字中,如果数据长度为奇数,最后...

21870
来自专栏進无尽的文章

编码篇-iOS开发中的奇巧小伎

最近搜集了自己以前的笔记中的一些小知识点,归为这篇文章,都是亲测有效的奇巧小伎,当你使用到时,你会大呼过瘾的。

13710
来自专栏黑白安全

来做个Google Hack吗?

storemanager/contents/item.php?page_code=

71760
来自专栏黑白安全

ctf工具包 ctf Toolkit 渗透测试工具包 隐秘数据破解

│ ├── caidao-20160620-www.maicaidao.com.7z

1K20
来自专栏我杨某人的青春满是悔恨

教你写个多表视图

如图所示的多表视图是一个很常用的东西,之前我是用UIScrollView和UITableViewController做的。把当前的控制器作为一个父控制器,添加三...

18830

扫码关注云+社区

领取腾讯云代金券