Введение
Streamlit — это популярная библиотека Python для создания веб-приложений, позволяющая легко создавать интерактивные дашборды и визуализации данных. Plotly — это еще одна мощная библиотека для создания интерактивных графиков и визуализаций. Однако, при использовании этих библиотек вместе, возникает вопрос: как выровнять график Plotly и пользовательскую HTML-карту в соседних столбцах Streamlit?
Проблема выравнивания
По умолчанию, Streamlit располагает элементы в столбцах по-разному, что может привести к неравномерному выравниванию элементов. Это особенно актуально при использовании графиков Plotly и пользовательских HTML-карт, которые имеют разную высоту и ширину.
Пример проблемы
Например, если у нас есть два соседних столбца, один с графиком Plotly, а другой с пользовательской HTML-картой, они могут выглядеть неровными и неэстетичными.
Решение с помощью Streamlit columns
Streamlit предоставляет встроенную поддержку столбцов, которая позволяет легко создавать макеты с несколькими столбцами. Мы можем использовать функцию st.columns() для создания двух соседних столбцов и затем добавить график Plotly и пользовательскую HTML-карту в каждый столбец.
import streamlit as stimport plotly.graph_objs as gocol1, col2 = st.columns(2)fig = go.Figure(data=[go.Bar(y=[1, 2, 3])])col1.plotly_chart(fig)html_card = "Пользовательская HTML-карта"col2.write(html_card)
Решение с помощью HTML и CSS
Другой подход к решению проблемы выравнивания — использование HTML и CSS. Мы можем завернуть график Plotly и пользовательскую HTML-карту в контейнер с определенной высотой и шириной, а затем использовать CSS для выравнивания содержимого.
import streamlit as stimport plotly.graph_objs as gocontainer = st.container()fig = go.Figure(data=[go.Bar(y=[1, 2, 3])])container.plotly_chart(fig, use_container_width=True)html_card = "Пользовательская HTML-карта"container.write(html_card)
Заключение
В этой статье мы рассмотрели два подхода к решению проблемы выравнивания графика Plotly и пользовательской HTML-карты в соседних столбцах Streamlit. Первый подход использует встроенную поддержку столбцов Streamlit, а второй подход использует HTML и CSS. Оба подхода позволяют достичь желаемого результата и сделать ваш дашборд более эстетичным и удобным для пользователя.