【前端统计图】hcharts实现堆叠柱形图(与后台数据交互）
2018-03-27 12:31
441 查看
原型图类似如下：
图片.png
福利二：微信小程序入门与实战全套详细视频教程。【领取方法】关注 【编程微刊】微信公众号：回复【小程序demo】一键领取130个微信小程序源码demo资源。回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集10G资源大放送。
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
图片.png
<!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:
4000
{
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
});
}
;
});
==============
在项目中需要用到的：
<!-- 柱状统计图 -->
<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;
}
}();原文首发：https://www.jianshu.com/p/582299e18c7e文末福利：
福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880福利二：微信小程序入门与实战全套详细视频教程。【领取方法】关注 【编程微刊】微信公众号：回复【小程序demo】一键领取130个微信小程序源码demo资源。回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集10G资源大放送。
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- SpringMVC实现前端后台交互传递数据
- 使用springmvc实现网页前端与后台的数据交互
- 利用ajax提交表单，实现数据前端后台数据交互的完整流程演示
- SpringMVC+Hibernate利用ajax实现前端后台数据交互
- Java+Spring长连接实现后台主动发送数据给前端
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- 利用Ajax实现前端与.net后端实现数据交互
- 网站统计中的数据收集原理及实现（有说前端如何埋点）
- JqGrid 学习笔记---实现在jqGrid表格上动态的加行、删行，最后点击“保存”按钮，与后台交互，保存数据
- iOS前端与后台交互技术实现及技术细节
- java实现各种数据统计图（柱形图，饼图，折线图）
- web前端——ajax提交后台controller实现前端后台交互(2) 传两个参数 ,后台controller接收处理
- ASP.NET使用AjaxPro实现前端跟后台交互详解
- java实现各种数据统计图（柱形图，饼图，折线图）
- 浅谈web前端与后台数据交互
- java实现各种数据统计图（柱形图，饼图，折线图）
- ASP.NET利用JQuery中的Aajax实现JSON数据后台交互
- 前后端数据交互之前端传值到后台
- java实现各种数据统计图（柱形图，饼图，折线图）
- 前端加密数据后台解密之RSA算法实现