将多个 Vega/vincent 图表添加到 Folium 弹出窗口

Posted 2023-02-16

【中文标题】将多个 Vega/vincent 图表添加到 Folium 弹出窗口

【英文标题】：Add multiple Vega/vincent charts to a Folium popup

【发布时间】：2020-04-26 07:10:48

【问题描述】：

我想使用 Vincent/Vega 将两个图表添加到 Folium 地图弹出窗口。我用图表创建了两个 vincent 对象，并尝试通过链接两个 add_child() 方法将它们都添加到 Popup 实例中。但只有第二个图表被渲染。

这是我使用的代码，但没有数据，只是对用于图表的数据的描述。

from folium import Map, CircleMarker, Vega, Popup
from vincent import Bar
import math

map = Map(zoom_start=8, tiles='cartodbpositron',
             location = [-73.5, 45.2]))

# zones is a pandas dataframe with lat/lng pairs of points.

for i, zone in zones.iterrows():
    # weekday_pings: a pandas groupby aggregation of most frequent day of week in a dataframe
    # hour_pings: a pandas groupby aggregation of most frequent hour of day in a dataframe

    dayvega = Bar(weekday_pings, width=300,
               height=150).axis_titles(x='Weekday', y='Pings')
    daychart = Vega(dayvega.to_json(), width=vega.width+50, height=vega.height+50)


    timevega = Bar(hour_pings, width=300,
               height=150).axis_titles(x='Hour', y='Pings')
    timechart = Vega(timevega.to_json(), width=vega.width+50, height=vega.height+50)


    map.add_child( CircleMarker(
        location = [zone['latitudeE7'], zone['longitudeE7']],
        radius = int(math.sqrt(zone['cluster_size'])/10 + 2),
        fill_opacity = 0.8, color=None,
        fill_color = ('#274cc9'),
        popup = Popup(max_width=chart.width[0]).add_child(daychart).add_child(timechart)
    ) )

结果如下：只渲染了第二个孩子。

【参考方案1】：

最后，我没有找到解决方案，所以我改用 Altair 制作图表，使用 compound chart constructor 在一个图中制作多个图表。

---