将图表绘制为 folium 地图中的弹出窗口

Question

我正在尝试使用 folium 和几个选项在标记中添加一个绘图图形作为弹出窗口，但它们都不适合我。

下面我尝试添加一个简单的绘图示例作为图形。

这是一段代码：

import plotly.express as px
import plotly
import json
import folium
geomap = folium.Map([19.715576, -99.20099], zoom_start=9, tiles="OpenStreetMap")

df = px.data.gapminder().query("country=='Canada'")
fig = px.line(df, x="year", y="lifeExp", title='Life expectancy in Canada')
fig.update_layout(margin=dict(t=10,l=10,b=10,r=10))[enter image description here](https://i.sstatic.net/Mjnkh.png)

coor1= [19.742110608748604, -99.01751491998121] #marker position

首先与Vega：

figjson = json.loads(fig.to_json())
popup = folium.Popup(max_width=650)
folium.Vega(figjson, height=350, width=650).add_to(popup)
folium.Marker(coor1, popup=popup, icon=folium.Icon(color = "blue", prefix = 'fa', icon = 'plane'), tooltip= "airport").add_to(geomap)

现在使用 iframe：

fightml = fig.to_html(full_html = True, default_width = 200, default_height = 200)
html = fightml
iframe = folium.IFrame(html=html,width=500, height=300)
popup = folium.Popup(iframe, max_width=500)
folium.Marker(coor1, popup=popup, icon=folium.Icon(color = "blue", prefix = 'fa', icon = 'plane'), tooltip= "airport").add_to(geomap)

两个选项都与第一张图片有类似的结果。 另一种结果更奇怪的选择是使用纯 html：

html = """
    <iframe \"""" + fightml + """\" width="850" height="400"  frameborder="0">    
    """
popoup= folium.Popup(folium.Html(html, script=True))
folium.Marker(coor1, popup=popup, icon=folium.Icon(color = "blue", prefix = 'fa', icon = 'plane'), tooltip= "airport").add_to(geomap) 

结果

谢谢大家

Answer 1

您可以在 folium 中使用 HTML 弹出窗口，因此请将使用plotly 创建的图表保存为 html 格式。接下来，加载保存的文件并将其设置为 IFrame 以在 folium 中使用。接下来，在 folium 中设置弹出窗口。最后，将其设置为箔弹出窗口。我的方法是保存一次，但可能还有其他更有效的方法。

import plotly.express as px
import folium
import branca

df = px.data.gapminder().query("country=='Canada'")
fig = px.line(df, x="year", y="lifeExp", title='Life expectancy in Canada')
fig.update_layout(margin=dict(t=30,l=10,b=10,r=10))
fig.write_html('/content/popup_map.html')

filepath = 'popup_map.html'
with open(filepath , encoding='utf-8') as f:
    html = f.read()

coor1= [19.742110608748604, -99.01751491998121]
geomap = folium.Map([19.715576, -99.20099], zoom_start=9, tiles="OpenStreetMap")

iframe = branca.element.IFrame(html=html, width=500, height=300)
popup = folium.Popup(iframe, max_width=500)

folium.Marker([coor1[0],coor1[1]], popup=popup).add_to(geomap)

geomap

Answer 2

您是否有可能使用 Fig.to_html 完成此操作，以便不需要保存图形？预先感谢。