<!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 }); } ; }); ```