gpt4 book ai didi

python - 单个 HTML/页面中的多个交互式图表

转载 作者:行者123 更新时间:2023-12-01 00:36:39 26 4
gpt4 key购买 nike

altair 中是否有可以在单页/HTML 中集成多个图形的功能?

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

我在这里发现了类似的问题:altair-viz/altair#1422 ,虽然找不到其实现的示例以供引用。谁能分享一下这方面的例子。

谢谢

最佳答案

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

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

如果出于某种原因您希望单独渲染图表并将两个渲染嵌入到单个 HTML 页面中,这是可能的,但 Altair 没有内置功能。<​​/p>

最好的方法是使用 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),
))

关于python - 单个 HTML/页面中的多个交互式图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57695759/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com