folium 弹出窗口中没有绘图

Question

我正在尝试在 folium 弹出窗口中嵌入一个情节条形图。

这就是我的做法：

# basic map :
map = folium.Map( location = [ 47.9060278 , 1.9020353 ] , zoom_start = 6, tiles = 'OpenStreetMap' )

# html file of plotly barchart :

fig = px.bar( a003_pdv_ca_his , x = 'mm' , y = 'ca' )

file_path = '/content/drive/MyDrive/Colab Notebooks/Data/a003_pdv_ca_his_20001.html'

fig.write_html( file_path )

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

# html in iframe :
iframe = branca.element.IFrame( html = html , width = 500 , height = 300 )

# folium popup from iframe :
popup = folium.Popup( iframe , max_width = 500 )

# add marker to the map :
folium.Marker( location = [ row.lat , row.lon ] , popup = popup , icon = folium.Icon( color = row.ins_clr ) ).add_to( map )

map

不幸的是，弹出窗口是空的。打开 html 文件时我看到了条形图。

有人有办法解决这个问题吗？可能是 iframe 的问题...

感谢您在该主题上的帮助。

Answer 1

这不完全是我想要的，但它可以帮助一些人：

# base map :

map = folium.Map( location = [ 47.9060278 , 1.9020353 ] , zoom_start = 6, tiles = 'OpenStreetMap' )

# chart

chart = altair.Chart( a003_pdv_ca_his[ a003_pdv_ca_his[ 'id_pdv' ] == row.id_pdv ] ).mark_bar().encode( x = 'mm' , y = 'ca' )

data = json.loads( chart.to_json() )

# popup

popup = folium.Popup( max_width = "100%" )

# chart in popup

folium.features.VegaLite( data , width = 300 , height = 250 ).add_to( popup )

# marker, popup & graph 

folium.Marker( location = [ row.lat , row.lon ] , popup = popup , icon = folium.Icon( color = row.ins_clr ) ).add_to( map )