在 folium 地图上添加交互式图表

Question

我想将图表添加到 folium 地图，如下所示：

在此输入图片描述

来源：https://github.com/jupyter-widgets/ipyleaflet

但我找不到任何指导这方面的文档。谁能帮我解决这个问题吗？

我尝试阅读https://ipyleaflet.readthedocs.io/en/latest/usage/index.html中的文档，但没有运气。 我希望看到一些用于将图表添加到地图的示例代码（而不是将图表添加到弹出窗口）。

Answer 1

要使用 Folium 将图表添加到地图，您可以按照以下步骤操作：

1. 通过在终端或命令提示符中运行 pip install folium 来安装 folium 库。

2. 在 Python 脚本中导入必要的库：

import folium
from folium.plugins import MarkerCluster

3. 使用 folium.Map() 函数创建地图对象：

m = folium.Map(location=[latitude, longitude], zoom_start=12)

将纬度和经度替换为地图中心的坐标。

4. 使用您喜欢的图表库（例如 matplotlib 或 seaborn）创建图表。例如，让我们创建一个简单的条形图：

import matplotlib.pyplot as plt

data = [10, 20, 30, 40, 50]
labels = ['A', 'B', 'C', 'D', 'E']

plt.bar(labels, data)
plt.xlabel('Categories')
plt.ylabel('Values')
plt.title('Chart Title')
plt.show()

5. 使用 mpld3 库将图表转换为 HTML：

import mpld3

chart_html = mpld3.fig_to_html(plt.gcf())

6. 在地图上创建标记并将图表 HTML 附加到其上：

marker = folium.Marker(location=[marker_latitude, marker_longitude])
marker.add_child(folium.Popup(chart_html))
marker.add_to(m)

将marker_latitude 和marker_longitude 替换为标记位置的坐标。

7. 将地图另存为 HTML 文件：

m.save('map_with_chart.html')
Now, if you open the map_with_chart.html file in a web browser, you should see the map with the chart attached to the marker.