单个 HTML/page 中的多个交互式图表
Multiple interactive graphs in single HTML/page
altair 中是否有可以将多个图形集成到一个 page/HTML 中的功能?
我正在从多个 .csv 文件生成图表,我可以单独保存图表,但一直在寻找一种方法来保存单个 "html"。
我在这里发现了一个类似的问题:altair-viz/altair#1422,但找不到有关其实现的示例以供参考。任何人都可以分享一个例子吗?
谢谢
如果要将多个图表合并为一个图表,可以使用连接:
(chart1 | chart2).save('charts.html')
如果出于某种原因您希望单独呈现图表并将两个呈现嵌入到单个 HTML 页面中,这是可能的,但 Altair 没有内置的功能。
最好的方法是直接使用 vega-embed 构建一个 HTML 模板,并将 chart.to_json()
的输出插入模板中的正确位置。
这是一个简单的示例,您可以根据需要使用标准 HTML/CSS 方法自定义布局:
import altair as alt
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('two_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),
))
altair 中是否有可以将多个图形集成到一个 page/HTML 中的功能?
我正在从多个 .csv 文件生成图表,我可以单独保存图表,但一直在寻找一种方法来保存单个 "html"。
我在这里发现了一个类似的问题:altair-viz/altair#1422,但找不到有关其实现的示例以供参考。任何人都可以分享一个例子吗?
谢谢
如果要将多个图表合并为一个图表,可以使用连接:
(chart1 | chart2).save('charts.html')
如果出于某种原因您希望单独呈现图表并将两个呈现嵌入到单个 HTML 页面中,这是可能的,但 Altair 没有内置的功能。
最好的方法是直接使用 vega-embed 构建一个 HTML 模板,并将 chart.to_json()
的输出插入模板中的正确位置。
这是一个简单的示例,您可以根据需要使用标准 HTML/CSS 方法自定义布局:
import altair as alt
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('two_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),
))