专栏首页编程微刊hcharts实现堆叠柱形图

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

相关文章

  • Highcharts使用的一些总结

    Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提...

    王小婷
  • Vue移动端框架Mint UI教程-数据渲染到页面(六)

    拿到res.data之后,要赋值给page实例里面的data 所以在data里面设置一个默认的空数组

    王小婷
  • 【前端统计图】echarts实现简单柱状图项目地址下载:

    王小婷
  • Python:base64图像数据处理

    弄啥嘞
  • 为什么你应该学习 Python 的生成器?

    写过一段时间代码的同学,应该对这一句话深有体会:程序的时间利用率和空间利用率往往是矛盾的,可以用时间换空间,可以用空间换时间,但很难同时提高一个程序的时间利用率...

    青南
  • 回归问题的中的常用方法

    Kaggle中的入门竞赛Houseprice竞赛是一个经典的回归问题,下面将以其中的特征工程代码演示一下回归问题中的常见套路。

    带萝卜
  • Python实现删除某列中含有空值的行的示例代码

    砸漏
  • 框架篇-Vue面试题1-为什么 vue 组件中的 data 是函数而不是对象

    当一个组件被定义,data必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例

    itclanCoder
  • 技术报告:开发工作数据中心(CS.DB)

    数据是任何企业的关键组成部分。希望利用机器学习或人工智能进行运营的组织进一步扩大了对高质量和易于访问数据的需求。为此,许多组织正在构建用于管理异构数据的资源,为...

    蔡小雪7100294
  • Lagrange、Newton、分段插值法及Python实现

    数据分析中,经常需要根据已知的函数点进行数据、模型的处理和分析,而通常情况下现有的数据是极少的,不足以支撑分析的进行,这里就需要使用差值法模拟新的数值来满足需求...

    统计学家

扫码关注云+社区

领取腾讯云代金券