本教程详细介绍了如何在folium地图中集成交互式图表。通过结合python的folium库、matplotlib进行图表绘制，并利用mpld3库将图表转换为可交互的html内容，最终将其嵌入到folium地图的标记弹出窗口中。文章将指导您完成环境搭建、图表创建、html转换及地图集成的完整流程，助您构建功能丰富的地理数据可视化应用。
1. 引言
在地理信息可视化中，将数据图表与地图相结合能够显著提升数据的洞察力和交互性。Folium作为一个强大的Python库，能够方便地创建Leaflet地图，但其本身并不直接提供在地图上绘制复杂图表的功能。本教程将介绍一种有效的方法，通过集成Matplotlib等图表库，并借助mpld3库将生成的图表转换为交互式HTML，最终将其作为弹出内容（Popup）添加到Folium地图的标记（Marker）上，从而实现地图与图表的动态结合。
2. 环境准备与库安装
在开始之前，请确保您的Python环境中已安装必要的库。您可以通过以下命令进行安装：
pip install folium matplotlib mpld3
- folium: 用于创建和操作Leaflet地图。
- matplotlib: 用于生成各种类型的静态图表。
- mpld3: 用于将Matplotlib图表转换为可交互的D3.js驱动的HTML。
3. 初始化Folium地图
首先，我们需要创建一个Folium地图对象作为我们操作的基础。您可以指定地图的中心坐标和初始缩放级别。
import folium
# 定义地图中心坐标（例如：北京）
latitude, longitude = 39.9042, 116.4074
zoom_start = 12
# 创建Folium地图对象
m = folium.Map(location=[latitude, longitude], zoom_start=zoom_start)
print("Folium地图初始化完成。")4. 创建并定制化图表
接下来，我们将使用Matplotlib创建一个示例图表。您可以根据实际需求创建任何类型的图表，例如柱状图、折线图、散点图等。这里以一个简单的柱状图为例。
import matplotlib.pyplot as plt
# 准备图表数据
data = [10, 20, 30, 40, 50]
labels = ['A', 'B', 'C', 'D', 'E']
# 创建Matplotlib图表
plt.figure(figsize=(6, 4)) # 可以设置图表大小
plt.bar(labels, data, color='skyblue')
plt.xlabel('分类')
plt.ylabel('数值')
plt.title('示例柱状图')
plt.grid(axis='y', linestyle='--') # 添加网格线
print("Matplotlib图表创建完成。")5. 将图表转换为交互式HTML
这是实现图表在Folium地图中交互显示的关键一步。mpld3库能够将Matplotlib生成的图表转换为基于D3.js的交互式HTML代码。
本文档主要讲述的是Matlab语言的特点；Matlab具有用法简单、灵活、程式结构性强、延展性好等优点，已经逐渐成为科技计算、视图交互系统和程序中的首选语言工具。特别是它在线性代数、数理统计、自动控制、数字信号处理、动态系统仿真等方面表现突出，已经成为科研工作人员和工程技术人员进行科学研究和生产实践的有利武器。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
import mpld3
# 将当前Matplotlib图表转换为HTML
# plt.gcf() 获取当前活动的图表对象
chart_html = mpld3.fig_to_html(plt.gcf())
# 关闭Matplotlib图表，防止在Jupyter环境中显示两次
plt.close()
print("Matplotlib图表已转换为HTML。")6. 将HTML图表添加到Folium标记的弹出窗口
现在，我们将创建地图上的一个标记，并将之前生成的HTML图表作为该标记的弹出内容。当用户点击地图上的标记时，该图表将以交互式弹窗的形式展现。
# 定义标记的坐标（例如：天安门广场附近）
marker_latitude, marker_longitude = 39.9087, 116.3975
# 创建一个Folium标记
marker = folium.Marker(location=[marker_latitude, marker_longitude])
# 创建一个Folium Popup，并将图表HTML内容作为其内容
# max_width 参数可以控制弹出窗口的最大宽度
popup = folium.Popup(chart_html, max_width=600)
# 将Popup添加到Marker
marker.add_child(popup)
# 将Marker添加到地图
marker.add_to(m)
print("HTML图表已作为弹出窗口添加到Folium标记。")7. 保存并查看地图
最后一步是将生成的Folium地图保存为HTML文件。您可以在任何现代网络浏览器中打开此文件来查看结果。
# 保存地图为HTML文件
output_file = 'map_with_interactive_chart.html'
m.save(output_file)
print(f"地图已保存到 {output_file}。请在浏览器中打开此文件查看。")8. 完整示例代码
import folium
import matplotlib.pyplot as plt
import mpld3
# --- 1. 初始化Folium地图 ---
latitude, longitude = 39.9042, 116.4074 # 北京中心坐标
zoom_start = 12
m = folium.Map(location=[latitude, longitude], zoom_start=zoom_start)
# --- 2. 创建并定制化图表 ---
data = [10, 20, 30, 40, 50]
labels = ['A', 'B', 'C', 'D', 'E']
plt.figure(figsize=(7, 4)) # 设置图表大小
plt.bar(labels, data, color=['skyblue', 'lightcoral', 'lightgreen', 'gold', 'lightpink'])
plt.xlabel('分类')
plt.ylabel('数值')
plt.title('地理数据分析示例图表')
plt.grid(axis='y', linestyle='--', alpha=0.7)
plt.tight_layout() # 调整布局，防止标签重叠
# --- 3. 将图表转换为交互式HTML ---
chart_html = mpld3.fig_to_html(plt.gcf())
plt.close() # 关闭Matplotlib图表
# --- 4. 将HTML图表添加到Folium标记的弹出窗口 ---
marker_latitude, marker_longitude = 39.9087, 116.3975 # 标记位置
marker = folium.Marker(location=[marker_latitude, marker_longitude],
tooltip="点击查看图表", # 鼠标悬停提示
icon=folium.Icon(color='red', icon='info-sign')) # 自定义标记图标
popup = folium.Popup(chart_html, max_width=650) # 设置弹出窗口最大宽度
marker.add_child(popup)
marker.add_to(m)
# --- 5. 保存并查看地图 ---
output_file = 'map_with_interactive_chart_full_example.html'
m.save(output_file)
print(f"教程完成！地图已保存到 {output_file}。请在浏览器中打开此文件查看交互式图表。")9. 注意事项与总结
- 交互性: mpld3转换的图表具有基本的交互性，例如鼠标悬停显示数据点信息、缩放等。这比简单的图片嵌入提供了更好的用户体验。
- 内容限制: 尽管可以将复杂的HTML内容嵌入到Folium的Popup中，但应注意避免过大的HTML内容可能导致地图加载缓慢或弹出窗口显示异常。
- 直接嵌入: 本教程采用的是将图表嵌入到标记的弹出窗口中。如果需要将图表直接作为地图上的一个控件或层级显示（如原始问题中的GIF所示），可能需要更高级的JavaScript或使用像ipyleaflet这样的库，它提供了更直接的Python-JavaScript桥接能力来控制Leaflet组件。然而，对于大多数用例，通过弹出窗口显示图表是一种简洁而有效的解决方案。
- 自定义: 您可以根据需要进一步定制Matplotlib图表的外观，以及Folium标记和弹出窗口的样式。
通过本教程，您已经掌握了在Folium地图中集成交互式图表的方法，这为您的地理空间数据分析和可视化提供了强大的工具。
