【前端统计图】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 网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数 ...
随机推荐
- 解决vmware 和hyper-v不能共存的问题
只需在 Windows 中以管理员身份运行命令提示符 cmd 1.运行 bcdedit /copy {current} /d "Windows 8 (关闭 Hyper-V)"命令, ...
- linux监测tomcat服务
原文链接:https://blog.csdn.net/qq_37936542/article/details/81086928 项目上线之后,tomcat服务器有时候会莫名其妙的挂掉,利用shell写 ...
- C#解决关闭多线程的form主窗体时抛出ObjectDisposedException 异常
一.现象: 我在主窗体新建线程,使用子线程来处理接收到的数据,并且更新窗体显示内容,但关闭主窗体程序之后就程序就报错,如下所示: 二.分析问题: 由于新建线程的处理函数里边是一直死循环处理数据,虽然窗 ...
- 记2018/5/5 qbxt 测试
记2018/5/5 qbxt 测试 竞赛时间: 2018 年 5 月 5 日 13:30-17:00 T1 一.maze(1s,512MB): 简单的迷宫问题:给定一个n*m的迷宫,.表示可以通过,# ...
- Android Unable to execute dex: method ID not in [0, 0xffff]: 65536 问题解决方法
开始一个新项目的时候,Build工程的时候一直报这个错误: 控制台报错误:Conversion to Dalvik format failed: Unable to execute dex: meth ...
- Redis的高级应用-事务处理、持久化、发布与订阅消息、虚拟内存使用
三.事务处理 Redis的事务处理比较简单.只能保证client发起的事务中的命令可以连续的执行,而且不会插入其他的client命令,当一个client在连接 中发出multi命令时,这个连接就进入一 ...
- ajax对服务端发送请求
//兼容处理获取ajax对象 var req = ''; if (window.XMLHttpRequest) req = new XMLHttpRequest(); else req = ...
- Redfield Water Ripples 2.02（水波滤镜中文绿色版-支持CC)
Redfield Water Ripples 能够用于设计具有高度现实主义风格的水波纹特效,它提供了诸多属性选项,其 3D 渲染品质另人映像深刻.此滤镜很易用,其随机设定生成器可创建差点儿无限的水波纹 ...
- 好记性不如烂笔头——datagridview相关
DataGridViewTextBoxColumn dgv_IDY = new DataGridViewTextBoxColumn(); dgv_IDY.Visible = false; dgv_ID ...
- jquery选择器里面也可以包含变量字符串
$("#"+uid).text(text);//jquery的选择器是可以放变量字符串的,同样是拼接字符串.