AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-11-08 67
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【前端统计图】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
        });
    }
    ;
});
==============
在项目中需要用到的：
![图片.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;
    }
}();
文章标签：
前端开发
关键词：
前端交互
前端后台
前端数据
前端数据交互
前端后台数据
祈澈菇凉
目录
相关文章
土木林森
|
5天前
|
设计模式 前端开发 JavaScript
揭秘！前端大牛们如何巧妙利用JavaScript，打造智能交互体验！
【10月更文挑战第30天】前端开发领域充满了无限可能与创意，JavaScript作为核心语言，凭借强大的功能和灵活性，成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果，展示了JavaScript的多样性和强大能力。
土木林森
17 4
土木林森
|
3天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术：掌握这些，让你的网页秒变交互神器！
【10月更文挑战第31天】前端开发藏有众多宝藏技术，如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求，提高代码可读性；Web Components则允许创建可重用、封装良好的自定义组件，提升代码复用性和独立性。此外，CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践，让网页秒变交互神器。
土木林森
9 2
想飞的雪糕
|
15天前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇（六）：发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型，详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据，包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据，并使用 MiniMongo 实现实时数据同步。此外，还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组，实现数据的自动更新。
想飞的雪糕
30 2
想飞的雪糕
|
15天前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇（七）：轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP（Distributed Data Protocol）协议，这是一种在Meteor框架中广泛使用的发布/订阅协议，支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用，包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP，开发者可以构建响应迅速、适应性强的现代Web应用。
想飞的雪糕
35 2
qa浪涛
|
28天前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
qa浪涛
26 4
土木林森
|
11天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘：JS如何将后台时间戳秒变亲切小时前、分钟前，让用户秒懂，提升互动体验！"
【10月更文挑战第23天】在Web开发中，将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能，通过计算当前时间和时间戳的差值，返回相应的描述，提升用户体验。
土木林森
20 0
想飞的雪糕
|
15天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇（三）：运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件，模拟了 MongoDB 的核心功能，允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制，MiniMongo 与服务器端的 MongoDB 实现实时数据同步，确保数据一致性，支持发布/订阅模型和响应式数据源，适用于实时聊天、项目管理和协作工具等应用场景。
想飞的雪糕
31 0
邹荣乐
|
22天前
|
存储 前端开发 API
前端开发中，Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中，Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
邹荣乐
74 0
想飞的雪糕
|
22天前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
100 2
你都不懂
|
22天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
34 0

热门文章

最新文章

  • 1
    前端常见Vue2.0面试题
  • 2
    lemon oa前端页面——由user-base-list谈项目组织
  • 3
    好程序员web前端培训分享JavaScript学习笔记cookie
  • 4
    前端校验和后端校验的区别和优缺点
  • 5
    前端性能优化参考资料
  • 6
    使用人人开源快速搭建项目前后端框架（附带商品分类管理示例），生成CRUD代码以及前端界面
  • 7
    前端点击其他输入框的时候，对当上个输入框进行判断（鼠标移出输入框事件，和鼠标点击其他输入框触发事件）
  • 8
    前端|AJAX入门
  • 9
    《智能前端技术与实践》——第 2 章 前端开发基础 ——2.5 与 Google 扩展程序相关的 JavaScript API
  • 10
    《2022 前端技术趋势解读》电子版地址下载
  • 1
    前端项目部署问题总结
    58
  • 2
    前端框架与库 - React生命周期与Hooks
    47
  • 3
    前端性能优化都有那些方案 ？
    67
  • 4
    高级前端常见的面试题？
    95
  • 5
    前端框架与库 - React基础：组件、Props、State
    69
  • 6
    技术心得：前端点击按钮，导入excel文件，上传到后台，excel接收和更新数据
    46
  • 7
    【vue3】前端实现 生成条形码并调用打印机打印
    392
  • 8
    【vue】 前端vue2 全局水印效果
    357
  • 9
    vue 前端 邮箱、密码、手机号码等输入验证规则
    374
  • 10
    Vue前端渲染blob二进制对象图片的方法
    287

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 【图生图】一键部署3D卡通风格模型
  • DataV平面地图组件入门
  • 图表样式智能美化工具
  • 快速搭建移动端可视化看板
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    DataWorks售前咨询