G2
G2
G6
F2
L7
墨者学院
关于 G2
图表示例
API 文档
使用教程
English
折线图
基础折线图
双折线图
多折线图
其他折线图
条形图
分组条形图
堆叠条形图
基础条形图
柱状图
基础柱状图
分组柱状图
堆叠柱状图
直方图
饼图
环图
玫瑰图
基础饼图
嵌套饼图
点图
散点图
面积图
基础面积图
堆叠面积图
区间面积图
箱形图
箱型图
烛形图
烛形图
热力图
热力图
仪表盘
仪表盘
漏斗图
漏斗图
地图
地图
雷达图
雷达图
分面
分面
关系图
关系图
其他图表
其他
迷你图
组件使用
组件
热力图
热力图
Heatmap on Geography,热力图(地理应用)。
源码
复制成功
复制失败
全屏
复制
运行
<!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> $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/heatmap.json', function(data) { var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight, padding: [0, 30, 60, 30] }); chart.source(data); chart.tooltip({ showTitle: false }); chart.axis(false); chart.legend({ offset: 10 }); chart.heatmap().position('g*l').color('tmp', '#F51D27-#FA541C-#FF8C12-#FFC838-#FAFFA8-#80FF73-#12CCCC-#1890FF-#6E32C2'); chart.guide().image({ start: ['min', 'max'], end: ['max', 'min'], src: 'https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png' }); 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> $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/heatmap.json', function(data) { var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight, padding: [0, 30, 60, 30] }); chart.source(data); chart.tooltip({ showTitle: false }); chart.axis(false); chart.legend({ offset: 10 }); chart.heatmap().position('g*l').color('tmp', '#F51D27-#FA541C-#FF8C12-#FFC838-#FAFFA8-#80FF73-#12CCCC-#1890FF-#6E32C2'); chart.guide().image({ start: ['min', 'max'], end: ['max', 'min'], src: 'https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png' }); chart.render(); }); </script> </body> </html>
图表简介
Heatmap on Geography,热力图(地理应用)。
了解更多
图表用法
热力图(Heat Map),“热力图”一词最初是由软件设计师Cormac Kinney于1991年提出并创造的,用来描述一个2D显示实时金融市场信息。最开始的热力图,是矩形色块加上颜色编码。经过多年的演化,习语上的热力图,如今更规范,更被大多数人理解的是这种经过平滑模糊过的热力图谱。
关联图表
饼图
折线图
相关链接
BizCharts
Viser