hcharts实现堆叠柱形图
来源:互联网 发布:淘宝短信营销话术 编辑:程序博客网 时间:2024/05/20 13:16
<!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 }); } ;});```
阅读全文
0 0
- hcharts实现堆叠柱形图
- hcharts实现堆叠柱形图
- hcharts
- Highcharts 堆叠柱形图
- 堆叠
- 堆叠
- css实现照片堆叠效果
- 简单的方块堆叠实现
- 利用Echarts实现堆叠柱状图
- Android堆叠式布局实现
- Highcharts 实现堆叠图下钻两层的方法
- 前端实现饼图、堆叠柱状图、折线图
- python3+PyQt5+Qt Designer实现堆叠窗口部件
- 自定义LayoutManager实现android-pile-layout滑动卡片堆叠效果
- 如何堆叠 硬堆叠、软堆叠
- hcharts学习笔记-折线图
- HCharts 柱状图和饼图
- 交换机堆叠
- fiddler对浏览器、app抓包及证书安装
- nowcode Cut(Wannafly挑战赛1 E)
- JAVA_位运算符_含义
- 设计模式_21:中介者模式
- C++ complex类
- hcharts实现堆叠柱形图
- ORACLE_表空间_计算增加数据文件数量
- LeetCode-624:Maximum Distance in Arrays (多数组找元素最大距离)
- MapReduce--1--入门程序WordCount
- git reset如何回滚代码
- MyEclipse导入jquery-1.8.0.min.js等文件报错的解决方案 版权声明:本文为博主原创文章,未经博主允许不得转载。 MyEclipse导入jQuery-1.8.0.min.j
- leetcode 51
- Android两个控件叠在一起,如何让被挡住的控件显示出来
- java线程之生产者与消费者模式