英文:
Altair chart out of container while container_width set true
问题
摘要
问题是我的图表有很多列,是否有一种方法可以将我的图表的宽度设置为它的容器,因为它现在超出了它的容器。
复现步骤
代码片段:
from vega_datasets import data
source = data.barley()
b = alt.Chart(source).mark_bar().encode(
x=alt.X('year:O', title=None),
y='yield:Q',
color='variety:N',
column=alt.Column('site:N', title=None,
header=alt.Header(labelColor='blue'))
)
st.altair_chart(b, use_container_width=True)
期望的行为:
图表应该在容器内部,无需滚动。
附加信息
英文:
Summary
Problem is my chart has many columns, is there a way my chart's width is set to his container because it's out of his container now.
Steps to reproduce
Code snippet:
from vega_datasets import data
source = data.barley()
b = alt.Chart(source).mark_bar().encode(
x=alt.X('year:O', title=None),
y='yield:Q',
color='variety:N',
column=alt.Column('site:N', title=None,
header=alt.Header(labelColor='blue'))
)
st.altair_chart(b, use_container_width=True)
Expected behavior:
Chart should be inside the container, no scrolling needed.
Additional information
答案1
得分: 0
I found a way to make the graph appear fully on screen without any scrollbar. Use st.columns
and put the graph inside the first column (columns[0]
).
import altair as alt
import streamlit as st
from vega_datasets import data
st.set_page_config(layout="wide")
source = data.barley()
b = alt.Chart(source).mark_bar().encode(
x=alt.X('year:O', title=None),
y='yield:Q',
color='variety:N',
column=alt.Column('site:N', title=None,
header=alt.Header(labelColor='blue'))
)
cols = st.columns([1, 1, 1, 1, 1, 1, 1])
with cols[0]:
st.altair_chart(b, use_container_width=True)
st.header("Some title")
st.markdown("Some text")
It gives:
I also added st.set_page_config
to set `layout="wide" in order to have more place on the screen to display the graph, but it works without it. Also, if need be, just add or remove some columns.
Note: When resizing the screen, this solution keeps the graph fully on the screen:
英文:
I found a way to make the graph appear fully on screen without any scrollbar. Use st.columns
and put the graph inside the first column (columns[0]
).
import altair as alt
import streamlit as st
from vega_datasets import data
st.set_page_config(layout="wide")
source = data.barley()
b = alt.Chart(source).mark_bar().encode(
x=alt.X('year:O', title=None),
y='yield:Q',
color='variety:N',
column=alt.Column('site:N', title=None,
header=alt.Header(labelColor='blue'))
)
cols = st.columns([1, 1, 1, 1, 1, 1, 1])
with cols[0]:
st.altair_chart(b, use_container_width=True)
st.header("Some title")
st.markdown("Some text")
It gives:
I also added st.set_page_config
to set layout="wide"
in order to have more place on the screen to display the graph, but it works without it. Also, if need be, just add or remove some columns.
Note: When resizing the screen, this solution keeps the graph fully on the screen:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论