完整HTML代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title挪威夏季奥运会奖牌分布地图 - Highcharts/title !-- 引入 Highcharts 核心库 地图库 -- script srchttps://cdn.jsdelivr.net/npm/highcharts10.3.3/highcharts.js/script script srchttps://cdn.jsdelivr.net/npm/highcharts10.3.3/modules/map.js/script script srchttps://cdn.jsdelivr.net/npm/highcharts10.3.3/modules/data.js/script style #container { width: 100%; height: 85vh; margin: 0 auto; } /style /head body div idcontainer/div script (async () { // 加载世界地图拓扑数据 const topology await fetch( https://code.highcharts.com/mapdata/custom/world.topo.json ).then(response response.json()); // 奥运会城市数据城市、国家、年份、纬度、经度、总奖牌、金牌、银牌、铜牌 const data [ [亚特兰大, 美国, 1996, 33.75, -84.38, 7, 2, 2, 3], [悉尼, 澳大利亚, 2000, -33.87, 151.20, 10, 4, 3, 3], [雅典, 希腊, 2004, 38, 23.72, 6, 5, 0, 1], [北京, 中国, 2008, 39.92, 116.38, 9, 3, 5, 1], [伦敦, 英国, 2012, 51.5, -0.12, 4, 2, 1, 1], [里约热内卢, 巴西, 2016, -22.91, -43.20, 4, 0, 0, 4], [东京, 日本, 2020, 35.69, 139.69, 8, 4, 2, 2] ]; Highcharts.mapChart(container, { chart: { map: topology }, // 关闭图例 legend: { enabled: false }, // 地图导航缩放按钮 mapNavigation: { enabled: true, buttonOptions: { verticalAlign: bottom } }, // 地图自适应显示范围 mapView: { fitToGeometry: { type: MultiPoint, coordinates: [ [-164, 54], [-35, 84], [179, -38], [-68, -55] ] } }, // 标题中文 title: { text: 挪威在夏季奥运会获得奖牌分布1996-2020, align: left }, // 副标题 subtitle: { text: 数据来源维基百科, align: left }, // 鼠标悬浮提示框汉化 tooltip: { headerFormat: , pointFormat: {point.city}{point.country} {point.year}br/ 总奖牌数{point.z}br/ span stylecolor: #ffd700;●/span 金牌{point.gold}br/ span stylecolor: #c0c0c0;●/span 银牌{point.silver}br/ span stylecolor: #cd7f32;●/span 铜牌{point.bronze}br/ }, series: [ { name: 世界地图, nullColor: #fad3cf // 地图底色 }, { name: 奥运会举办城市, type: mapbubble, // 气泡地图类型 color: #fe5f55, lineWidth: 1, // 数据字段对应关系 keys: [ city, country, year, lat, lon, z, gold, silver, bronze ], data: data, minSize: 5%, // 气泡最小尺寸 maxSize: 12.5%,// 气泡最大尺寸 } ] }); })(); /script /body /html1. 图表类型这是一个世界地图 气泡图Map Bubble组合图表底层世界地图上层气泡点→ 代表奥运会举办城市2. 气泡代表什么每个气泡 一届夏季奥运会气泡位置 举办城市坐标气泡大小 挪威获得的总奖牌数气泡越大 → 奖牌越多3. 数据包含哪些信息每一行数据对应[城市,国家,年份,纬度,经度,总奖牌,金牌,银牌,铜牌]4. 鼠标悬浮提示Tooltip悬浮在气泡上会显示城市、国家、年份总奖牌数金牌、银牌、铜牌数量5. 图表功能✅ 支持鼠标缩放地图✅ 支持拖拽移动✅ 自动适配世界范围✅ 美观配色 中文汉化✅ 可直接本地运行6. 适用场景地理数据可视化赛事 / 事件全球分布带数值大小的点位展示大屏数据展示你直接复制这段代码保存为.html双击打开就能看到完整地图图表需要我再给你做动态数据版、可切换年份、可筛选奖牌的增强版吗
如何创建蛛网地图｜气泡事件+全球发布+关联组合图表开发示例
发布时间：2026/6/1 9:57:39
完整HTML代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title挪威夏季奥运会奖牌分布地图 - Highcharts/title !-- 引入 Highcharts 核心库 地图库 -- script srchttps://cdn.jsdelivr.net/npm/highcharts10.3.3/highcharts.js/script script srchttps://cdn.jsdelivr.net/npm/highcharts10.3.3/modules/map.js/script script srchttps://cdn.jsdelivr.net/npm/highcharts10.3.3/modules/data.js/script style #container { width: 100%; height: 85vh; margin: 0 auto; } /style /head body div idcontainer/div script (async () { // 加载世界地图拓扑数据 const topology await fetch( https://code.highcharts.com/mapdata/custom/world.topo.json ).then(response response.json()); // 奥运会城市数据城市、国家、年份、纬度、经度、总奖牌、金牌、银牌、铜牌 const data [ [亚特兰大, 美国, 1996, 33.75, -84.38, 7, 2, 2, 3], [悉尼, 澳大利亚, 2000, -33.87, 151.20, 10, 4, 3, 3], [雅典, 希腊, 2004, 38, 23.72, 6, 5, 0, 1], [北京, 中国, 2008, 39.92, 116.38, 9, 3, 5, 1], [伦敦, 英国, 2012, 51.5, -0.12, 4, 2, 1, 1], [里约热内卢, 巴西, 2016, -22.91, -43.20, 4, 0, 0, 4], [东京, 日本, 2020, 35.69, 139.69, 8, 4, 2, 2] ]; Highcharts.mapChart(container, { chart: { map: topology }, // 关闭图例 legend: { enabled: false }, // 地图导航缩放按钮 mapNavigation: { enabled: true, buttonOptions: { verticalAlign: bottom } }, // 地图自适应显示范围 mapView: { fitToGeometry: { type: MultiPoint, coordinates: [ [-164, 54], [-35, 84], [179, -38], [-68, -55] ] } }, // 标题中文 title: { text: 挪威在夏季奥运会获得奖牌分布1996-2020, align: left }, // 副标题 subtitle: { text: 数据来源维基百科, align: left }, // 鼠标悬浮提示框汉化 tooltip: { headerFormat: , pointFormat: {point.city}{point.country} {point.year}br/ 总奖牌数{point.z}br/ span stylecolor: #ffd700;●/span 金牌{point.gold}br/ span stylecolor: #c0c0c0;●/span 银牌{point.silver}br/ span stylecolor: #cd7f32;●/span 铜牌{point.bronze}br/ }, series: [ { name: 世界地图, nullColor: #fad3cf // 地图底色 }, { name: 奥运会举办城市, type: mapbubble, // 气泡地图类型 color: #fe5f55, lineWidth: 1, // 数据字段对应关系 keys: [ city, country, year, lat, lon, z, gold, silver, bronze ], data: data, minSize: 5%, // 气泡最小尺寸 maxSize: 12.5%,// 气泡最大尺寸 } ] }); })(); /script /body /html1. 图表类型这是一个世界地图 气泡图Map Bubble组合图表底层世界地图上层气泡点→ 代表奥运会举办城市2. 气泡代表什么每个气泡 一届夏季奥运会气泡位置 举办城市坐标气泡大小 挪威获得的总奖牌数气泡越大 → 奖牌越多3. 数据包含哪些信息每一行数据对应[城市,国家,年份,纬度,经度,总奖牌,金牌,银牌,铜牌]4. 鼠标悬浮提示Tooltip悬浮在气泡上会显示城市、国家、年份总奖牌数金牌、银牌、铜牌数量5. 图表功能✅ 支持鼠标缩放地图✅ 支持拖拽移动✅ 自动适配世界范围✅ 美观配色 中文汉化✅ 可直接本地运行6. 适用场景地理数据可视化赛事 / 事件全球分布带数值大小的点位展示大屏数据展示你直接复制这段代码保存为.html双击打开就能看到完整地图图表需要我再给你做动态数据版、可切换年份、可筛选奖牌的增强版吗
