G2
G2
G6
F2
L7
墨者学院
关于 G2
图表示例
API 文档
使用教程
English
折线图
基础折线图
双折线图
多折线图
其他折线图
条形图
分组条形图
堆叠条形图
基础条形图
柱状图
基础柱状图
分组柱状图
堆叠柱状图
直方图
饼图
环图
玫瑰图
基础饼图
嵌套饼图
点图
散点图
面积图
基础面积图
堆叠面积图
区间面积图
箱形图
箱型图
烛形图
烛形图
热力图
热力图
仪表盘
仪表盘
漏斗图
漏斗图
地图
地图
雷达图
雷达图
分面
分面
关系图
关系图
其他图表
其他
迷你图
组件使用
组件
堆叠柱状图
圆角堆叠柱状图
Stacked 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 src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script> <script> var _G = G2, Chart = _G.Chart, Shape = _G.Shape, Util = _G.Util; function getFillAttrs(cfg) { var attrs = Util.mix({ fill: cfg.color, fillOpacity: cfg.opacity }, cfg.style); return attrs; } function getRectPath(points) { var path = []; for (var i = 0; i < points.length; i++) { var point = points[i]; if (point) { var action = i === 0 ? 'M' : 'L'; path.push([action, point.x, point.y]); } } var first = points[0]; path.push(['L', first.x, first.y]); path.push(['z']); return path; } // 顶边带圆角 Shape.registerShape('interval', 'top', { draw: function draw(cfg, container) { var attrs = getFillAttrs(cfg); var path = getRectPath(cfg.points); path = this.parsePath(path); // 将 0 - 1 的值转换为画布坐标 var radius = (path[2][1] - path[1][1]) / 2; var temp = []; temp.push(['M', path[0][1], path[0][2]]); temp.push(['L', path[1][1], path[1][2] + radius]); temp.push(['A', radius, radius, 90, 0, 1, path[1][1] + radius, path[1][2]]); temp.push(['L', path[2][1] - radius, path[2][2]]); temp.push(['A', radius, radius, 90, 0, 1, path[2][1], path[2][2] + radius]); temp.push(['L', path[3][1], path[3][2]]); temp.push(['Z']); return container.addShape('path', { attrs: Util.mix(attrs, { path: temp }) }); } }); // 底边带圆角 Shape.registerShape('interval', 'bottom', { draw: function draw(cfg, container) { var attrs = getFillAttrs(cfg); var path = getRectPath(cfg.points); path = this.parsePath(path); var radius = (path[2][1] - path[1][1]) / 2; var temp = []; temp.push(['M', path[0][1] + radius, path[0][2]]); temp.push(['A', radius, radius, 90, 0, 1, path[0][1], path[0][2] - radius]); temp.push(['L', path[1][1], path[1][2]]); temp.push(['L', path[2][1], path[2][2]]); temp.push(['L', path[3][1], path[3][2] - radius]); temp.push(['A', radius, radius, 90, 0, 1, path[3][1] - radius, path[3][2]]); temp.push(['Z']); return container.addShape('path', { attrs: Util.mix(attrs, { path: temp }) }); } }); var data = [{ year: '2014', type: 'Sales', sales: 1000 }, { year: '2015', type: 'Sales', sales: 1170 }, { year: '2016', type: 'Sales', sales: 660 }, { year: '2017', type: 'Sales', sales: 1030 }, { year: '2014', type: 'Expenses', sales: 400 }, { year: '2015', type: 'Expenses', sales: 460 }, { year: '2016', type: 'Expenses', sales: 1120 }, { year: '2017', type: 'Expenses', sales: 540 }, { year: '2014', type: 'Profit', sales: 300 }, { year: '2015', type: 'Profit', sales: 300 }, { year: '2016', type: 'Profit', sales: 300 }, { year: '2017', type: 'Profit', sales: 350 }]; var chart = new Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight, padding: [20, 80, 80, 80] }); chart.source(data, { sales: { max: 2400, tickInterval: 600 } }); var axisCfg = { label: { textStyle: { fontFamily: 'Monospace', fontWeight: 700, fontSize: 14, fill: '#545454' } }, grid: { lineStyle: { lineDash: [0, 0], stroke: '#545454' } } }; chart.axis('year', axisCfg); chart.axis('sales', Util.mix({}, axisCfg, { line: null })); chart.intervalStack().position('year*sales').color('type').size(35).shape('type', function(val) { if (val === 'Profit') { // 顶部圆角 return 'bottom'; } else if (val === 'Sales') { // 底部圆角 return 'top'; } else { return; // 其他默认 } }).style({ stroke: '#545454', lineWidth: 2 }); 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 src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script> <script>G2.Global.setTheme('dark');</script> <script> var _G = G2, Chart = _G.Chart, Shape = _G.Shape, Util = _G.Util; function getFillAttrs(cfg) { var attrs = Util.mix({ fill: cfg.color, fillOpacity: cfg.opacity }, cfg.style); return attrs; } function getRectPath(points) { var path = []; for (var i = 0; i < points.length; i++) { var point = points[i]; if (point) { var action = i === 0 ? 'M' : 'L'; path.push([action, point.x, point.y]); } } var first = points[0]; path.push(['L', first.x, first.y]); path.push(['z']); return path; } // 顶边带圆角 Shape.registerShape('interval', 'top', { draw: function draw(cfg, container) { var attrs = getFillAttrs(cfg); var path = getRectPath(cfg.points); path = this.parsePath(path); // 将 0 - 1 的值转换为画布坐标 var radius = (path[2][1] - path[1][1]) / 2; var temp = []; temp.push(['M', path[0][1], path[0][2]]); temp.push(['L', path[1][1], path[1][2] + radius]); temp.push(['A', radius, radius, 90, 0, 1, path[1][1] + radius, path[1][2]]); temp.push(['L', path[2][1] - radius, path[2][2]]); temp.push(['A', radius, radius, 90, 0, 1, path[2][1], path[2][2] + radius]); temp.push(['L', path[3][1], path[3][2]]); temp.push(['Z']); return container.addShape('path', { attrs: Util.mix(attrs, { path: temp }) }); } }); // 底边带圆角 Shape.registerShape('interval', 'bottom', { draw: function draw(cfg, container) { var attrs = getFillAttrs(cfg); var path = getRectPath(cfg.points); path = this.parsePath(path); var radius = (path[2][1] - path[1][1]) / 2; var temp = []; temp.push(['M', path[0][1] + radius, path[0][2]]); temp.push(['A', radius, radius, 90, 0, 1, path[0][1], path[0][2] - radius]); temp.push(['L', path[1][1], path[1][2]]); temp.push(['L', path[2][1], path[2][2]]); temp.push(['L', path[3][1], path[3][2] - radius]); temp.push(['A', radius, radius, 90, 0, 1, path[3][1] - radius, path[3][2]]); temp.push(['Z']); return container.addShape('path', { attrs: Util.mix(attrs, { path: temp }) }); } }); var data = [{ year: '2014', type: 'Sales', sales: 1000 }, { year: '2015', type: 'Sales', sales: 1170 }, { year: '2016', type: 'Sales', sales: 660 }, { year: '2017', type: 'Sales', sales: 1030 }, { year: '2014', type: 'Expenses', sales: 400 }, { year: '2015', type: 'Expenses', sales: 460 }, { year: '2016', type: 'Expenses', sales: 1120 }, { year: '2017', type: 'Expenses', sales: 540 }, { year: '2014', type: 'Profit', sales: 300 }, { year: '2015', type: 'Profit', sales: 300 }, { year: '2016', type: 'Profit', sales: 300 }, { year: '2017', type: 'Profit', sales: 350 }]; var chart = new Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight, padding: [20, 80, 80, 80] }); chart.source(data, { sales: { max: 2400, tickInterval: 600 } }); var axisCfg = { label: { textStyle: { fontFamily: 'Monospace', fontWeight: 700, fontSize: 14, fill: '#545454' } }, grid: { lineStyle: { lineDash: [0, 0], stroke: '#545454' } } }; chart.axis('year', axisCfg); chart.axis('sales', Util.mix({}, axisCfg, { line: null })); chart.intervalStack().position('year*sales').color('type').size(35).shape('type', function(val) { if (val === 'Profit') { // 顶部圆角 return 'bottom'; } else if (val === 'Sales') { // 底部圆角 return 'top'; } else { return; // 其他默认 } }).style({ stroke: '#545454', lineWidth: 2 }); chart.render(); </script> </body> </html>
图表简介
Stacked Column Chart，堆叠柱状图。与并排显示分类的分组柱状图不同，堆叠柱状图将每个柱子进行分割以显示相同类型下各个数据的大小情况。
了解更多
图表用法
堆叠柱状图可以形象得展示一个大分类包含的每个小分类的数据，以及各个小分类的占比，显示的是单个项目与整体之间的关系。
关联图表
条形图
相关链接
BizCharts
Viser
