G2
G2
G6
F2
L7
墨者学院
关于 G2
图表示例
API 文档
使用教程
English
折线图
基础折线图
双折线图
多折线图
其他折线图
条形图
分组条形图
堆叠条形图
基础条形图
柱状图
基础柱状图
分组柱状图
堆叠柱状图
直方图
饼图
环图
玫瑰图
基础饼图
嵌套饼图
点图
散点图
面积图
基础面积图
堆叠面积图
区间面积图
箱形图
箱型图
烛形图
烛形图
热力图
热力图
仪表盘
仪表盘
漏斗图
漏斗图
地图
地图
雷达图
雷达图
分面
分面
关系图
关系图
其他图表
其他
迷你图
组件使用
组件
堆叠柱状图
分组柱状图
Grouped Column Chart,分组柱状图。又叫聚合柱状图。当使用者需要在同一个轴上显示各个分类下不同的分组时,需要用到分组柱状图。
源码
复制成功
复制失败
全屏
复制
运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>分组柱状图</title> <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> </head> <body> <div id="mountNode"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script> <script> var data = [{ "name": "London", "月份": "Jan.", "月均降雨量": 18.9 }, { "name": "London", "月份": "Feb.", "月均降雨量": 28.8 }, { "name": "London", "月份": "Mar.", "月均降雨量": 39.3 }, { "name": "London", "月份": "Apr.", "月均降雨量": 81.4 }, { "name": "London", "月份": "May", "月均降雨量": 47 }, { "name": "London", "月份": "Jun.", "月均降雨量": 20.3 }, { "name": "London", "月份": "Jul.", "月均降雨量": 24 }, { "name": "London", "月份": "Aug.", "月均降雨量": 35.6 }, { "name": "Berlin", "月份": "Jan.", "月均降雨量": 12.4 }, { "name": "Berlin", "月份": "Feb.", "月均降雨量": 23.2 }, { "name": "Berlin", "月份": "Mar.", "月均降雨量": 34.5 }, { "name": "Berlin", "月份": "Apr.", "月均降雨量": 99.7 }, { "name": "Berlin", "月份": "May", "月均降雨量": 52.6 }, { "name": "Berlin", "月份": "Jun.", "月均降雨量": 35.5 }, { "name": "Berlin", "月份": "Jul.", "月均降雨量": 37.4 }, { "name": "Berlin", "月份": "Aug.", "月均降雨量": 42.4 }]; var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight }); chart.source(data); chart.interval().position('月份*月均降雨量').color('name').adjust([{ type: 'dodge', marginRatio: 1 / 32 }]); chart.render(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>分组柱状图</title> <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> </head> <body style="background: #1f1f1f;"> <div id="mountNode"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script> <script>G2.Global.setTheme('dark');</script> <script> var data = [{ "name": "London", "月份": "Jan.", "月均降雨量": 18.9 }, { "name": "London", "月份": "Feb.", "月均降雨量": 28.8 }, { "name": "London", "月份": "Mar.", "月均降雨量": 39.3 }, { "name": "London", "月份": "Apr.", "月均降雨量": 81.4 }, { "name": "London", "月份": "May", "月均降雨量": 47 }, { "name": "London", "月份": "Jun.", "月均降雨量": 20.3 }, { "name": "London", "月份": "Jul.", "月均降雨量": 24 }, { "name": "London", "月份": "Aug.", "月均降雨量": 35.6 }, { "name": "Berlin", "月份": "Jan.", "月均降雨量": 12.4 }, { "name": "Berlin", "月份": "Feb.", "月均降雨量": 23.2 }, { "name": "Berlin", "月份": "Mar.", "月均降雨量": 34.5 }, { "name": "Berlin", "月份": "Apr.", "月均降雨量": 99.7 }, { "name": "Berlin", "月份": "May", "月均降雨量": 52.6 }, { "name": "Berlin", "月份": "Jun.", "月均降雨量": 35.5 }, { "name": "Berlin", "月份": "Jul.", "月均降雨量": 37.4 }, { "name": "Berlin", "月份": "Aug.", "月均降雨量": 42.4 }]; var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight }); chart.source(data); chart.interval().position('月份*月均降雨量').color('name').adjust([{ type: 'dodge', marginRatio: 1 / 32 }]); chart.render(); </script> </body> </html>
图表简介
Grouped Column Chart,分组柱状图。又叫聚合柱状图。当使用者需要在同一个轴上显示各个分类下不同的分组时,需要用到分组柱状图。
了解更多
图表用法
跟柱状图类似,使用柱子的高度来映射和对比数据值。每个分组中的柱子使用不同的颜色或者相同颜色不同透明的方式区别各个分类,各个分组之间需要保持间隔。分组柱状图经常用于不同组间数据的比较,这些组都包含了相同分类的数据。但是仍需要注意,避免分组中分类过多的情况,分类过多会导致分组中柱子过多过密,非常影响图表可读性。
关联图表
条形图
相关链接
BizCharts
Viser