Python 单个HTML/页面中的多个交互式图形_Python_Altair

Python 单个HTML/页面中的多个交互式图形

python

Python 单个HTML/页面中的多个交互式图形,python,altair,Python,Altair,altair中是否有一个函数可以在单个页面/HTML中集成多个图形我正在从多个.csv文件生成图形，我能够单独保存图形，但正在寻找一种方法来保存在单个“html”中我在这里发现了一个类似的问题：，但找不到有关其实现的示例可供参考。任何人都可以分享一个例子谢谢如果要将多个图表合并为一个图表，可以使用串联： (chart1 | chart2).save('charts.html') 如果出于某种原因，您希望单独呈现图表，并将两个呈现嵌入一个HTML页面，这是可能的，但Altair没有内置的功

altair中是否有一个函数可以在单个页面/HTML中集成多个图形

我正在从多个.csv文件生成图形，我能够单独保存图形，但正在寻找一种方法来保存在单个“html”中

我在这里发现了一个类似的问题：，但找不到有关其实现的示例可供参考。任何人都可以分享一个例子

谢谢

如果要将多个图表合并为一个图表，可以使用串联：

(chart1 | chart2).save('charts.html')

如果出于某种原因，您希望单独呈现图表，并将两个呈现嵌入一个HTML页面，这是可能的，但Altair没有内置的功能

最好的方法是直接使用构建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导入为alt
作为pd进口熊猫
两张图表模板“”
vegaEmbed（'#vis1'，{spec1}）.catch（console.error）；
vegaEmbed（'#vis2'，{spec2}）.catch（console.error）；
"""
df=pd.DataFrame（{'x'：范围（5），'y'：范围（5）}）
chart1=alt.Chart（df）.mark_point（）.encode（x='x'，y='y'）
chart2=alt.Chart（df）.mark_line（）.encode（x='x'，y='y'）
以open（'two_charts.html'，'w'）作为f：
f、 写入（两张图表）模板格式(
vega_版本=alt.vega_版本，
vegalite_版本=alt.vegalite_版本，
vegaembed_version=alt.vegaembed_version，
spec1=chart1.to_json（缩进=None），
spec2=chart2.to_json（缩进=None），
))