【前端统计图】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 网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数 ...
随机推荐
- 用djbdns为域名解析服务护航
上期回顾:http://chenguang.blog.51cto.com/350944/292195 650) this.width=650;" alt="&quo ...
- Android 在滚动列表中实现视频的播放(ListView & RecyclerView)
这片文章基于开源项目: VideoPlayerManager. 所有的代码和示例都在那里.本文将跳过许多东西.因此如果你要真正理解它是如何工作的,最好下载源码,并结合源代码一起阅读本文.但是即便是没有 ...
- js的数据类型和typeof数据类型
js的数据类型:number,string,null,undefined,Boolean,object typeof数据类型:number,string,object,function,undefin ...
- HDU3689 Infinite monkey theorem 无限猴子(字符串DP+KMP)
题目描述: 大概的意思就是根据无限猴子定理,无限只猴子坐在打字机旁瞎敲,总有一个能敲出莎士比亚文集.现在给你一个打字机和一只猴子,打字机的每个按钮(共n个)上的字母及猴子按下这个按钮的概率已知,而且猴 ...
- numpy_basic
一.Numpy是什么 Numerical Python,数值的Python,补充了Python语言所欠缺的数值计算能力. Numpy是其它数据分析及机器学习库的底层库. Numpy完全标准C语言实现, ...
- java list 容器的ConcurrentModificationException
java中的很多容器在遍历的同时进行修改里面的元素都会ConcurrentModificationException,包括多线程情况和单线程的情况.多线程的情况就用说了,单线程出现这个异常一般是遍历( ...
- 1.7 Python基础知识 - 模块初识
在Python中有很多模块,模块对应的就是python源代码文件.模块中有Python程序自己附带的标准模块,还有很多其他人共享的第三方模块.模块中可以定义变量.函数和类.而多个功能类似的模块可以组织 ...
- ORACLE10g R2【单实例 FS→单实例FS】
ORACLE10g R2[单实例FS→单实例FS] 本演示案例所用环境: primary standby OS Hostname pry std OS Version RHEL5.8 RHEL5. ...
- 推荐一款优雅高效的免费在线APP原型工具
有段时间没有推荐干货给大伙了,今天是时候把压箱底的东西拿出来分享给大家了! 想要学习原型图绘制的小伙伴可以看过来,适合零基础的小白,五分钟就可以上手,绘制自己想要的产品原型图. 官方介绍:用户只需输入 ...
- Windows下编译OpenSSL（使用VS2013）
简述 OpenSSL是一个开源的第三方库,它实现了SSL(Secure SocketLayer)和TLS(Transport Layer Security)协议,被广泛企业应用所采用.对于一般的开发人 ...