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

Question

我想使用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)
    ) )

结果是：只有第二个孩子被渲染。

Answer 1

最后没有找到解决办法，所以我换了 Altair 来做图表，用 compound chart constructor 把多个图表做成一张图。

---