【前端统计图】hcharts实现堆叠柱形图(与后台数据交互）
原型图类似如下：
图片.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: {
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后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
【前端统计图】hcharts实现堆叠柱形图(与后台数据交互）的更多相关文章
- vue-cli模拟后台数据交互
作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很 ...
- --@angularJS--自定义服务与后台数据交互小实例
1.myService.html: <!DOCTYPE HTML><html ng-app="app"><head> <title& ...
- --@angularJS--$http服务与后台数据交互
1.httpBasic.html: <!DOCTYPE HTML><html ng-app="app"><head> <title& ...
- MUI框架-09-MUI 与后台数据交互
MUI框架-09-MUI 与后台数据交互 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现 我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们 ...
- AntDesign(React)学习-10 Dva 与后台数据交互
明天正式在线办公没时间学习了,今天晚上再更新一篇, 代码提交一次:https://github.com/zhaogaojian/jgdemo 1.src下创建services目录 创建文件userSr ...
- hcharts实现堆叠柱形图
<!DOCTYPE > <html> <head> <meta charset="utf-8"><link rel=" ...
- web前端与后台数据交互
1.前端请求数据URL由谁来写? 在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数,这里的查 ...
- 使用Jquery.AJAX方法和PHP后台数据交互小结
使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...
- js前台与后台数据交互-前台调后台
转自:http://blog.csdn.net/wang379275614/article/details/17033981 网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数 ...
随机推荐
- JS 原型模式创建对象
例子: class Test { constructor(val) { this.val = val } walk() { console.log(this) console.log('walk') ...
- 你真的懂Flask中浅谈蓝图Blueprint吗？
一,什么是Flask中的蓝图Blueprint Blueprint是用于实现Flask框架中单个应用的视图,模板,静态文件的集合. Blueprint 是一个存储操作(路由映射)方法的容器,这些操作在 ...
- SpringBoot+springmvc异步处理请求
有两种情况,第一种是业务逻辑复杂,但不需要业务逻辑的结果,第二种是需要返回业务逻辑的处理结果 第一种比较简单,利用多线程处理业务逻辑,或者利用spring中@Asyn注解更简单, 使用@Asyn注解, ...
- spring与cxf整合配置webservice接口(以jaxws:server的方式配置)
ps:最近项目需要跟其他系统做同步,需要使用webservice来提供接口给其他系统调用:临时抱佛脚赶紧去网上找了下资料,发现用Endpoint的方式发布接口好容易哦:赶紧写了个例子做验证,发布成功. ...
- 右键菜单添加带图标的Notepad++
给Notepad++ 加带图标右键菜单 方式一: 拷贝以下代码建立一个reg文件,替换相关路径,保存,双击运行加入注册表 Windows Registry Editor Version 5.00 [H ...
- Linux 命令笔记（1）
[root@Oracle11_2 ~]# ll total -rw-------. root root May : anaconda-ks.cfg drwxr-xr-x. root root May ...
- 低成本开始互联网创业：探讨域名、服务器、CDN、邮箱等节流之道
互联网创业一直是个热门话题,对这个问题我也有不断的思考. 今天,探讨下如何低成本开始互联网创业. 背景 愿意冒险去创业的同志,大多是"屌丝"而非"高富帅",大多 ...
- springboot集成shiro 实现权限控制（转）
shiro apache shiro 是一个轻量级的身份验证与授权框架,与spring security 相比较,简单易用,灵活性高,springboot本身是提供了对security的支持,毕竟是自 ...
- uva 10710 - Chinese Shuffle(完美洗牌)
option=com_onlinejudge&Itemid=8&category=474&page=show_problem&problem=1651"> ...
- Python内部机制-PyObject对象
PyObject对象机制的基石 学过Python的人应该非常清晰,Python中一切都是对象,全部的对象都有一个共同的基类,对于本篇博文来说,一切皆是对象则是探索Python的对象机制的一个入口点．我 ...