【前端统计图】hcharts实现堆叠柱形图(与后台数据交互）
时间:2022-05-30
本文章向大家介绍【前端统计图】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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 最全Vue开发环境搭建
- apicloud api.openwin
- C#观察者模式实例
- xml序列化和反序列化（二）
- xml序列化和反序列化（一）
- js this问题和es6箭头函数this问题
- 元素淡入淡出效果实现
- Asp.Net Mvc表单提交（批量提交）
- Vue 基本指令和html常用标签结合使用综合案例（含代码）
- ef和mysql使用（二）--让mysql支持EntityFramework.Extended实现批量更新和删除
- EF 多种查询方式
- （mysql）找不到请求的 .Net Framework Data Provider。可能没有安装
- Vue 中的 v-cloak 解读
- ef和mysql使用（一）
- 浏览器工作原理