G2
G2
G6
F2
L7
墨者学院
关于 G2
图表示例
API 文档
使用教程
English
折线图
基础折线图
双折线图
多折线图
其他折线图
条形图
分组条形图
堆叠条形图
基础条形图
柱状图
基础柱状图
分组柱状图
堆叠柱状图
直方图
饼图
环图
玫瑰图
基础饼图
嵌套饼图
点图
散点图
面积图
基础面积图
堆叠面积图
区间面积图
箱形图
箱型图
烛形图
烛形图
热力图
热力图
仪表盘
仪表盘
漏斗图
漏斗图
地图
地图
雷达图
雷达图
分面
分面
关系图
关系图
其他图表
其他
迷你图
组件使用
组件
其他
气泡图-自定义 shape
气泡图-自定义 shape
源码
复制成功
复制失败
全屏
复制
运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>气泡图-自定义 shape</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> // 自定义 shape, 支持图片形式的气泡 var Shape = G2.Shape; Shape.registerShape('point', 'image', { drawShape: function drawShape(cfg, container) { cfg.points = this.parsePoints(cfg.points); var coord = this._coord; container.addShape('line', { attrs: { x1: cfg.points[0].x, y1: cfg.points[0].y, x2: cfg.points[0].x, y2: coord.start.y, stroke: '#ccc', lineWidth: 1, lineDash: [4, 2] } }); return container.addShape('image', { attrs: { x: cfg.points[0].x - 12 * cfg.size / 2, y: cfg.points[0].y - 12 * cfg.size, width: 12 * cfg.size, height: 12 * cfg.size, img: cfg.shape[1] } }); } }); var data = [{ name: 'Internet Explorer', value: 26 }, { name: 'Chrome', value: 40 }, { name: 'Firefox', value: 30 }, { name: 'Safari', value: 24 }, { name: 'Opera', value: 15 }, { name: 'Undetectable', value: 8 }]; var imageMap = { 'Internet Explorer': 'https://gw.alipayobjects.com/zos/rmsportal/eOYRaLPOmkieVvjyjTzM.png', 'Chrome': 'https://gw.alipayobjects.com/zos/rmsportal/dWJWRLWfpOEbwCyxmZwu.png', 'Firefox': 'https://gw.alipayobjects.com/zos/rmsportal/ZEPeDluKmAoTioCABBTc.png', 'Safari': 'https://gw.alipayobjects.com/zos/rmsportal/eZYhlLzqWLAYwOHQAXmc.png', 'Opera': 'https://gw.alipayobjects.com/zos/rmsportal/vXiGOWCGZNKuVVpVYQAw.png', 'Undetectable': 'https://gw.alipayobjects.com/zos/rmsportal/NjApYXminrnhBgOXyuaK.png' }; var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight, padding: [20, 20, 90] }); chart.source(data, { value: { nice: false, max: 60, min: 0 } }); chart.legend(false); chart.axis('value', false); chart.point().position('name*value').size('value').color('name').shape('name', function(name) { return ['image', imageMap[name]]; // 根据具体的字段指定 shape }).label('value', { offset: -20, textStyle: { fontSize: 16 // 文本大小 } }); 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>气泡图-自定义 shape</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> // 自定义 shape, 支持图片形式的气泡 var Shape = G2.Shape; Shape.registerShape('point', 'image', { drawShape: function drawShape(cfg, container) { cfg.points = this.parsePoints(cfg.points); var coord = this._coord; container.addShape('line', { attrs: { x1: cfg.points[0].x, y1: cfg.points[0].y, x2: cfg.points[0].x, y2: coord.start.y, stroke: '#ccc', lineWidth: 1, lineDash: [4, 2] } }); return container.addShape('image', { attrs: { x: cfg.points[0].x - 12 * cfg.size / 2, y: cfg.points[0].y - 12 * cfg.size, width: 12 * cfg.size, height: 12 * cfg.size, img: cfg.shape[1] } }); } }); var data = [{ name: 'Internet Explorer', value: 26 }, { name: 'Chrome', value: 40 }, { name: 'Firefox', value: 30 }, { name: 'Safari', value: 24 }, { name: 'Opera', value: 15 }, { name: 'Undetectable', value: 8 }]; var imageMap = { 'Internet Explorer': 'https://gw.alipayobjects.com/zos/rmsportal/eOYRaLPOmkieVvjyjTzM.png', 'Chrome': 'https://gw.alipayobjects.com/zos/rmsportal/dWJWRLWfpOEbwCyxmZwu.png', 'Firefox': 'https://gw.alipayobjects.com/zos/rmsportal/ZEPeDluKmAoTioCABBTc.png', 'Safari': 'https://gw.alipayobjects.com/zos/rmsportal/eZYhlLzqWLAYwOHQAXmc.png', 'Opera': 'https://gw.alipayobjects.com/zos/rmsportal/vXiGOWCGZNKuVVpVYQAw.png', 'Undetectable': 'https://gw.alipayobjects.com/zos/rmsportal/NjApYXminrnhBgOXyuaK.png' }; var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight, padding: [20, 20, 90] }); chart.source(data, { value: { nice: false, max: 60, min: 0 } }); chart.legend(false); chart.axis('value', false); chart.point().position('name*value').size('value').color('name').shape('name', function(name) { return ['image', imageMap[name]]; // 根据具体的字段指定 shape }).label('value', { offset: -20, textStyle: { fontSize: 16 // 文本大小 } }); chart.render(); </script> </body> </html>
图表简介
气泡图-自定义 shape
了解更多
图表用法
气泡图通常用于比较和展示不同类别圆点(这里我们称为气泡)之间的关系,通过气泡的位置以及面积大小。从整体上看,气泡图可用于分析数据之间的相关性。
相关链接
BizCharts
Viser