Altair 图表在容器之外,而容器宽度设置为 true。

huangapple go评论62阅读模式
英文:

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)

期望的行为:

图表应该在容器内部,无需滚动。

附加信息

Altair 图表在容器之外,而容器宽度设置为 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

Altair 图表在容器之外,而容器宽度设置为 true。

答案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:

Altair 图表在容器之外,而容器宽度设置为 true。


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:

Altair 图表在容器之外,而容器宽度设置为 true。

英文:

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:

Altair 图表在容器之外,而容器宽度设置为 true。


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:

Altair 图表在容器之外,而容器宽度设置为 true。

huangapple
  • 本文由 发表于 2023年3月15日 18:07:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/75743223.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定