单个HTML/pag中的多个交互式图形

2024-04-25 22:46:29 发布

您现在位置：Python中文网/ 问答频道 /正文
5002 3

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

我从多个.csv文件生成图形，我可以分别保存图形，但正在寻找一种方法保存在单个“html”。你知道吗

我在这里发现了一个类似的问题：altair-viz/altair#1422，但是找不到关于其实现的示例供参考。任何人都可以分享一个例子。你知道吗

谢谢


Tags： 文件csv方法函数图形示例html页面
1条回答
网友
1楼 · 发布于 2024-04-25 22:46:29

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

(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),
    ))

相关问题 更多 >

    编程相关推荐