G2
G2
G6
F2
L7
墨者学院
关于 G2
图表示例
API 文档
使用教程
English
折线图
基础折线图
双折线图
多折线图
其他折线图
条形图
分组条形图
堆叠条形图
基础条形图
柱状图
基础柱状图
分组柱状图
堆叠柱状图
直方图
饼图
环图
玫瑰图
基础饼图
嵌套饼图
点图
散点图
面积图
基础面积图
堆叠面积图
区间面积图
箱形图
箱型图
烛形图
烛形图
热力图
热力图
仪表盘
仪表盘
漏斗图
漏斗图
地图
地图
雷达图
雷达图
分面
分面
关系图
关系图
其他图表
其他
迷你图
组件使用
组件
地图
世界分级统计地图
Choropleth 分级统计地图。
源码
复制成功
复制失败
全屏
复制
运行
<!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/world.geo.json', function(mapData) { var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight, padding: [55, 20] }); chart.tooltip({ showTitle: false }); // 同步度量 chart.scale({ longitude: { sync: true }, latitude: { sync: true } }); chart.axis(false); chart.legend('trend', { position: 'left' }); // 绘制世界地图背景 var ds = new DataSet(); var worldMap = ds.createView('back').source(mapData, { type: 'GeoJSON' }); var worldMapView = chart.view(); worldMapView.source(worldMap); worldMapView.tooltip(false); worldMapView.polygon().position('longitude*latitude').style({ fill: '#fff', stroke: '#ccc', lineWidth: 1 }); // 可视化用户数据 var userData = [{ name: 'Russia', value: 86.8 }, { name: 'China', value: 106.3 }, { name: 'Japan', value: 94.7 }, { name: 'Mongolia', value: 98 }, { name: 'Canada', value: 98.4 }, { name: 'United Kingdom', value: 97.2 }, { name: 'United States of America', value: 98.3 }, { name: 'Brazil', value: 96.7 }, { name: 'Argentina', value: 95.8 }, { name: 'Algeria', value: 101.3 }, { name: 'France', value: 94.8 }, { name: 'Germany', value: 96.6 }, { name: 'Ukraine', value: 86.3 }, { name: 'Egypt', value: 102.1 }, { name: 'South Africa', value: 101.3 }, { name: 'India', value: 107.6 }, { name: 'Australia', value: 99.9 }, { name: 'Saudi Arabia', value: 130.1 }, { name: 'Afghanistan', value: 106.5 }, { name: 'Kazakhstan', value: 93.4 }, { name: 'Indonesia', value: 101.4 }]; var userDv = ds.createView().source(userData).transform({ geoDataView: worldMap, field: 'name', type: 'geo.region', as: ['longitude', 'latitude'] }).transform({ type: 'map', callback: function callback(obj) { obj.trend = obj.value > 100 ? '男性更多' : '女性更多'; return obj; } }); var userView = chart.view(); userView.source(userDv, { 'trend': { alias: '每100位女性对应的男性数量' } }); userView.polygon().position('longitude*latitude').color('trend', ['#F51D27', '#0A61D7']).opacity('value').tooltip('name*trend').animate({ leave: { animation: 'fadeOut' } }); 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/world.geo.json', function(mapData) { var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight, padding: [55, 20] }); chart.tooltip({ showTitle: false }); // 同步度量 chart.scale({ longitude: { sync: true }, latitude: { sync: true } }); chart.axis(false); chart.legend('trend', { position: 'left' }); // 绘制世界地图背景 var ds = new DataSet(); var worldMap = ds.createView('back').source(mapData, { type: 'GeoJSON' }); var worldMapView = chart.view(); worldMapView.source(worldMap); worldMapView.tooltip(false); worldMapView.polygon().position('longitude*latitude').style({ fill: '#fff', stroke: '#ccc', lineWidth: 1 }); // 可视化用户数据 var userData = [{ name: 'Russia', value: 86.8 }, { name: 'China', value: 106.3 }, { name: 'Japan', value: 94.7 }, { name: 'Mongolia', value: 98 }, { name: 'Canada', value: 98.4 }, { name: 'United Kingdom', value: 97.2 }, { name: 'United States of America', value: 98.3 }, { name: 'Brazil', value: 96.7 }, { name: 'Argentina', value: 95.8 }, { name: 'Algeria', value: 101.3 }, { name: 'France', value: 94.8 }, { name: 'Germany', value: 96.6 }, { name: 'Ukraine', value: 86.3 }, { name: 'Egypt', value: 102.1 }, { name: 'South Africa', value: 101.3 }, { name: 'India', value: 107.6 }, { name: 'Australia', value: 99.9 }, { name: 'Saudi Arabia', value: 130.1 }, { name: 'Afghanistan', value: 106.5 }, { name: 'Kazakhstan', value: 93.4 }, { name: 'Indonesia', value: 101.4 }]; var userDv = ds.createView().source(userData).transform({ geoDataView: worldMap, field: 'name', type: 'geo.region', as: ['longitude', 'latitude'] }).transform({ type: 'map', callback: function callback(obj) { obj.trend = obj.value > 100 ? '男性更多' : '女性更多'; return obj; } }); var userView = chart.view(); userView.source(userDv, { 'trend': { alias: '每100位女性对应的男性数量' } }); userView.polygon().position('longitude*latitude').color('trend', ['#F51D27', '#0A61D7']).opacity('value').tooltip('name*trend').animate({ leave: { animation: 'fadeOut' } }); chart.render(); }); </script> </body> </html>
图表简介
Choropleth 分级统计地图。
了解更多
图表用法
分级统计地图是一种在地图分区上使用视觉符号(通常是颜色、阴影或者不同疏密的晕线)来表示一个范围值的分布情况的地图。在整个制图区域的若干个小的区划单元内(行政区划或者其他区划单位),根据各分区的数量(相对)指标进行分级,并用相应色级或不同疏密的晕线,反映各区现象的集中程度或发展水平的分布差别,最常见于选举和人口普查数据的可视化,这些数据以省、市登地理区域为单位。
关联图表
地图
相关链接
BizCharts
Viser