1. <!DOCTYPE >
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  7.         <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
  8.         <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
  9.         <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
  10.     </head>
  11.     <body>
  12.         <div id="container" style="width:800px;height:400px"></div>
  13.         <script>
  14. $(function () {
  15.     $('#container').highcharts({
  16.         chart: {
  17.             type: 'column'
  18.         },
  19.         title: {
  20.             text: '堆叠柱形图'
  21.         },
  22.         xAxis: {
  23.             categories: ['三年级一班', '三年级二班', '三年三班', '三年级四班', '三年级五班']
  24.         },
  25.         yAxis: {
  26.             min: 0,
  27.             title: {
  28.                 text: ''
  29.             },
  30.             stackLabels: {
  31.                 enabled: true,
  32.                 style: {
  33.                     fontWeight: 'bold',
  34.                     color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
  35.                 }
  36.             }
  37.         },
  38.         legend: {
  39.             align: 'right',
  40.             x: -30,
  41.             verticalAlign: 'top',
  42.             y: 25,
  43.             floating: true,
  44.             backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
  45.             borderColor: '#CCC',
  46.             borderWidth: 1,
  47.             shadow: false
  48.         },
  49.         tooltip: {
  50.             formatter: function () {
  51.                 return '<b>' + this.x + '</b><br/>' +
  52.                     this.series.name + ': ' + this.y + '<br/>' +
  53.                     '总量: ' + this.point.stackTotal;
  54.             }
  55.         },
  56.         plotOptions: {
  57.             column: {
  58.                 stacking: 'normal',
  59.                 dataLabels: {
  60.                     enabled: true,
  61.                     color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
  62.                     style: {
  63.                         textShadow: '0 0 3px black'
  64.                     }
  65.                 }
  66.             }
  67.         },
  68.         series: [{
  69.             name: '未到',
  70.             data: [1, 1, 2, 1, 2]
  71.         }, {
  72.             name: '迟到',
  73.             data: [2, 2, 3, 2, 1]
  74.         }, {
  75.             name: '已到',
  76.             data: [8, 9, 10, 11, 12]
  77.         }]
  78.     });
  79. });
  81.         </script>
  83.     </body>
  85. </html>

异步加载数据

  1. // 异步加载数据
  2. $("#queryCount").on("click", function() {
  3.     var numb = 0;
  4.     numb = validate(numb);
  5.     if (numb == 1) {
  6.         return;
  7.     }
  8.     $.ajax({
  9.         url : "/bison/signIn/count/countOrgan",
  10.         async : false,
  11.         data : {
  12.             beginDate : $("#beginTime").val(),
  13.             endDate : $("#endTime").val(),
  14.             personSex : $("#personSex").val(),
  15.             organIds : getOrganIds(),
  16.             signSetId : $("#signSet option:selected").val(),
  17.         },
  18.         type : 'POST',
  19.         dataType : 'json',
  20.         success : function(data) {
  21.             // 成功时执行的回调方法
  22.             category_data = data.returnData.response.categor;
  23.             natural_data = data.returnData.response.normalList;
  24.             late_data = data.returnData.response.lateList;
  25.             absent_data = data.returnData.response.absentList;
  26.             fun(category_data, natural_data, late_data, absent_data);
  27.         },
  28.         error : erryFunction
  29.     // 错误时执行方法
  30.     });
  32.     function erryFunction() {
  33.         layer.alert('请联系超管，数据返回失败', {
  34.             icon : 3
  35.         });
  36.     }
  37.     ;
  38. });
  39. ​```

hcharts实现堆叠柱形图的更多相关文章

  1. 【前端统计图】hcharts实现堆叠柱形图(与后台数据交互）

    原型图类似如下: 图片.png <!DOCTYPE > <html> <head> <meta charset="utf-8">&l ...

  2. JFreeChart之堆叠柱形图(StackedBar)

    JFreeChart之堆叠柱形图(StackedBar) JAVA JFreeChart 最近的项目使用有个功能需要使用到堆叠柱形图,看了项目以前的代码实现没有想要的结果.所以自己就先到官网下载了 D ...

  3. XCL-Charts图表库中柱形图的同源风格切换介绍

    柱形图是被使用最多的图之中的一个,在写XCL-Charts这个Android图表库时,为它花费的时间相当多,不是由于有多难绘制,而是要在设计时怎样才干保证图基类能适应各种情况,能灵活满足足够多的需求, ...

  4. R语言-画柱形图

    barplot()函数 1.柱形图 > sales<-read.csv("citysales.csv",header=TRUE) #读取数据 > barplot( ...

  5. 图表（Chart & Graph）你真的用对了吗？

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 工作中,我们常常会遇到各式各样的数据,例如网站性能,销售业绩,客户服务 .营销活动等数据.对于这些数据,有哪些行之有效的方法来形 ...

  6. C#实现DevExpress本地化实例详解

    using System; using System.Collections.Generic; using System.Text; using DevExpress.XtraGrid.Localiz ...

  7. MPAndroidChart Wiki(译文)～Part 2

    7. 填充数据 这一章节将讲解给各式各样的图表设置数据的方法. 7.1 LineChart(线形图) 想给图表添加数据,使用如下方法: public void setData(ChartData da ...

  8. Python3 读取和写入excel

    https://blog.csdn.net/weixin_43094965/article/details/82226263一.Excel 1.Excel文件三个对象 workbook: 工作簿,一个 ...

  9. pandas可视化：各种图的简单使用

    一.Matplotlib中几种图的名字 折线图:plot 柱形图:bar 直方图:hist 箱线图:box 密度图:kde 面积图:area 散点图:scatter 散点图矩阵:scatter_mat ...

随机推荐

  1. Anders Hejlsberg 和 Erich Gamma

    Anders Hejlsberg 和 Erich Gamma 大概半年前,我写了一篇名叫<有点软文>的文章,深情并茂地告诉大家,我司其实隐藏着很多牛人巨擘.有些人是身怀屠龙技,但是大家不认 ...

  2. 使程序在Linux下后台运行 （关掉终端继续让程序运行的方法）

    你是否遇到过这样的情况:从终端软件登录远程的Linux主机,将一堆很大的文件压缩为一个.tar.gz文件,连续压缩了半个小时还没有完成,这时,突然你断网了,你登录不上远程Linux主机了,那么前面的半 ...

  3. 67.nodejs取参四种方法req.body,req.params,req.param,req.body

    转自:http://www.cnblogs.com/jkingdom/p/8065202.html 摘要: nodejs取参四种方法req.body,req.params,req.param,req. ...

  4. 阿里云 Ubuntu14.04 升级 python3.4 到 python 3.5/6

    买的阿里云服务器给的系统是Ubuntu14.04,里面装的Python3版本是Python3.4,本来也没什么,但是这个版本的Python安装flask和django各种报错,所以只好升级Python ...

  5. 今日SGU 5.1

    SGU 100 题意: 普通的a+b #include<bits/stdc++.h> #define de(x) cout<<#x<<"="&l ...

  6. c#程序打包、机器代码生成(Ngen.exe)

    深入本机影像生成器(Ngen.exe)工具使用方法详解 先介绍一点背景知识:.Net程序在运行时会实时(JIT)编译,将.Net程序文件编译成cpu认识的汇编机器码.实时编译需要消耗额外的cpu和内存 ...

  7. 18/9/21模拟赛-Updated

    18/9/21模拟赛 期望得分:100:实际得分:0  qwq 拿到题目第一眼,我去,这不是洛谷原题(仓鼠找Sugar)吗 又多看了几眼,嗯,对,除了是有多组数据外,就是原题 然后码码码....自以为 ...

  8. iOS报错 -pie can only be used when targeting iOS 4.2 or later

    近期,使用师兄的project时.突然报错之前没发现这个错误.信息例如以下: ld: -pie can only be used when targeting iOS 4.2 or later cla ...

  9. 可重入锁ReentrantLock--转载

    突然被问到什么是可重入锁?脑袋里闪过了n中概念,最终没有找到,从网上学习一下. 原文地址:https://www.ibm.com/developerworks/cn/java/j-jtp10264/ ...

  10. 用VBS控制鼠标，在Excel2010、2013，64位中

    原作者文章地址:http://demon.tw/programming/vbs-control-mouse.html 感谢原作者的攻略.才使我学会用VBS控制鼠标. 但是问题接踵而至,Excel200 ...