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

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

时间：2023-07-07 02:38:35

原型图类似如下：

图片.png

<!DOCTYPE ><html><head><meta charset="utf-8"><link rel="icon" href="/highcharts/images/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="/jquery/jquery-1.8.3.min.js"></script><script src="/highcharts/highcharts.js"></script><script src="/highcharts/modules/exporting.js"></script><script src="/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('按年统计跨距不得超过', {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是-12-18格式var aDate, oDate1, oDate2, iDaysaDate = sDate1.split("-")oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) // 转换为12-18-格式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;}}();

原文首发：/p/582299e18c7e