将多个Vega/vincent图表添加到Folium弹出窗口
我想添加两个图表到一个Folium地图弹出窗口使用文森/维加。我创建了两个带有图表的文森特对象，并试图通过链接两个add_child()方法将它们都添加到一个弹出实例中。但是只有第二个图表会被呈现。
以下是我使用的代码，但没有数据，只是用于图表的数据的描述。
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)
) )结果如下:只渲染第二个子对象。
回答 2
Stack Overflow用户
发布于 2021-02-17 08:21:16
最后，我没有找到解决方案，所以我切换到了牵牛星的图表，使用compound chart constructor在一个图表中制作多个图表。
Stack Overflow用户
发布于 2022-02-26 17:35:51
找到这个源码，它可能会被证明是有用的：https://github.com/altair-viz/altair/issues/1422
澄清一下：
可以创建包含两个或更多图表的.html文件或html代码(Vanderplas，2019)：
import altair as alt
import folium
import pandas as pd
two_charts_template = """
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vega@{vega_version}"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@{vegalite_version}"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@{vegaembed_version}"></script>
</head>
<body>
<div id="vis1"></div>
<div id="vis2"></div>
<script type="text/javascript">
vegaEmbed('#vis1', {spec1}).catch(console.error);
vegaEmbed('#vis2', {spec2}).catch(console.error);
</script>
</body>
</html>
"""
df = pd.DataFrame({'x': range(5), 'y': range(5)})
chart1 = alt.Chart(df).mark_point().encode(x='x', y='y')
chart2 = alt.Chart(df).mark_line().encode(x='x', y='y')
with open('charts.html', 'w') as f:
f.write(two_charts_template.format(
vega_version=alt.VEGA_VERSION,
vegalite_version=alt.VEGALITE_VERSION,
vegaembed_version=alt.VEGAEMBED_VERSION,
spec1=chart1.to_json(indent=None),
spec2=chart2.to_json(indent=None),
))该文件现在可用，可以回读，因此：
html_file = open('charts.html', 'r', encoding='utf-8')
charts_code = html_file.read() 这可以放入地图中：
# In case a file is not needed a direct assignment can be used
# charts_code = two_charts_template.format(
# vega_version=alt.VEGA_VERSION,
# vegalite_version=alt.VEGALITE_VERSION,
# vegaembed_version=alt.VEGAEMBED_VERSION,
# spec1=chart1.to_json(indent=None),
# spec2=chart2.to_json(indent=None),
# )
iframe = branca.element.IFrame(html=charts_code, width=1500, height=400)
popup = folium.Popup(iframe, max_width=2000)
folium.Marker([51.5,-0.11], popup=popup).add_to(a_map)
a_map希望能有所帮助。
参考文献：
Vanderplas，J. (2019) 'Multiple Charts in one HTML #1422‘Online。可在https://github.com/altair-viz/altair/issues/1422 (2022年2月26日访问)获得。
https://stackoverflow.com/questions/59651106
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号