G2
G2
G6
F2
L7
墨者学院
关于 G2
图表示例
API 文档
使用教程
English
折线图
基础折线图
双折线图
多折线图
其他折线图
条形图
分组条形图
堆叠条形图
基础条形图
柱状图
基础柱状图
分组柱状图
堆叠柱状图
直方图
饼图
环图
玫瑰图
基础饼图
嵌套饼图
点图
散点图
面积图
基础面积图
堆叠面积图
区间面积图
箱形图
箱型图
烛形图
烛形图
热力图
热力图
仪表盘
仪表盘
漏斗图
漏斗图
地图
地图
雷达图
雷达图
分面
分面
关系图
关系图
其他图表
其他
迷你图
组件使用
组件
环图
基础环图
Donut 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 = [{ item: '事例一', count: 40, percent: 0.4 }, { item: '事例二', count: 21, percent: 0.21 }, { item: '事例三', count: 17, percent: 0.17 }, { item: '事例四', count: 13, percent: 0.13 }, { item: '事例五', count: 9, percent: 0.09 }]; var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight, animate: false }); chart.source(data, { percent: { formatter: function formatter(val) { val = val * 100 + '%'; return val; } } }); chart.coord('theta', { radius: 0.75, innerRadius: 0.6 }); chart.tooltip({ showTitle: false, itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>' }); // 辅助文本 chart.guide().html({ position: ['50%', '50%'], html: '<div style="color:#8c8c8c;font-size: 14px;text-align: center;width: 10em;">主机<br><span style="color:#8c8c8c;font-size:20px">200</span>台</div>', alignX: 'middle', alignY: 'middle' }); var interval = chart.intervalStack().position('percent').color('item').label('percent', { formatter: function formatter(val, item) { return item.point.item + ': ' + val; } }).tooltip('item*percent', function(item, percent) { percent = percent * 100 + '%'; return { name: item, value: percent }; }).style({ lineWidth: 1, stroke: '#fff' }); chart.render(); interval.setSelected(data[0]); </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 = [{ item: '事例一', count: 40, percent: 0.4 }, { item: '事例二', count: 21, percent: 0.21 }, { item: '事例三', count: 17, percent: 0.17 }, { item: '事例四', count: 13, percent: 0.13 }, { item: '事例五', count: 9, percent: 0.09 }]; var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight, animate: false }); chart.source(data, { percent: { formatter: function formatter(val) { val = val * 100 + '%'; return val; } } }); chart.coord('theta', { radius: 0.75, innerRadius: 0.6 }); chart.tooltip({ showTitle: false, itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>' }); // 辅助文本 chart.guide().html({ position: ['50%', '50%'], html: '<div style="color:#8c8c8c;font-size: 14px;text-align: center;width: 10em;">主机<br><span style="color:#8c8c8c;font-size:20px">200</span>台</div>', alignX: 'middle', alignY: 'middle' }); var interval = chart.intervalStack().position('percent').color('item').label('percent', { formatter: function formatter(val, item) { return item.point.item + ': ' + val; } }).tooltip('item*percent', function(item, percent) { percent = percent * 100 + '%'; return { name: item, value: percent }; }).style({ lineWidth: 1, stroke: '#fff' }); chart.render(); interval.setSelected(data[0]); </script> </body> </html>
图表简介
Donut Chart,基础环图,其本质是饼图将中间区域挖空。
了解更多
图表用法
饼图的整体性太强,我们会将注意力集中在比较饼图内各个扇形之间占整体比重的关系。但如果我们将两个饼图放在一起,饼图很难同时对比两个图。环图在解决上述问题时,采用了让我们更关注长度而不是面积的做法。这样我们就能相对简单的对比不同的环图。同时环图相对于饼图空间的利用率更高,比如我们可以使用它的空心区域显示文本信息,比如标题等。
关联图表
条形图
相关链接
BizCharts
Viser