如何在Python的Streamlit中创建图形？能否通过HTML、CSS或直接方式添加正方形、三角形、圆形等形状？

Absolutely! You can easily add squares, triangles, circles, and more to your Streamlit apps—using HTML/CSS, plotting libraries, or even custom components. Let’s walk through the most practical methods:

1. HTML & CSS (Quick, Customizable Static Shapes) #

Streamlit supports rendering raw HTML via st.markdown() with the unsafe_allow_html=True parameter. This is perfect for simple, stylized shapes when you don’t need plotting logic.

Here’s code for each basic shape:

• Square

st.markdown("""
<div style="width: 100px; height: 100px; background-color: #2196F3; margin: 1rem;"></div>
""", unsafe_allow_html=True)

• Circle

st.markdown("""
<div style="width: 100px; height: 100px; background-color: #4CAF50; border-radius: 50%; margin: 1rem;"></div>
""", unsafe_allow_html=True)

• Triangle

st.markdown("""
<div style="width: 0; 
            height: 0; 
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid #FF9800;
            margin: 1rem;"></div>
""", unsafe_allow_html=True)

You can tweak styles like background-color, margin, border, or even add hover animations to make these shapes fit your app’s design.

2. Matplotlib (For Data-Integrated Shapes) #

If you need to combine shapes with data visualizations (like charts or data points), Matplotlib is a solid choice. Use its patches module to draw precise shapes:

import matplotlib.pyplot as plt
import matplotlib.patches as patches

# Create a figure and axis
fig, ax = plt.subplots(figsize=(8, 3))

# Draw square
square = patches.Rectangle((0, 0), 2, 2, facecolor='#2196F3', alpha=0.7)
ax.add_patch(square)

# Draw circle
circle = patches.Circle((3.5, 1), 1, facecolor='#4CAF50', alpha=0.7)
ax.add_patch(circle)

# Draw triangle
triangle = patches.Polygon([(5, 0), (6, 2), (4, 2)], facecolor='#FF9800', alpha=0.7)
ax.add_patch(triangle)

# Adjust axes to fit all shapes and hide default axes
ax.set_xlim(-0.5, 6.5)
ax.set_ylim(-0.5, 2.5)
ax.axis('off')

# Render in Streamlit
st.pyplot(fig)

This method shines when you need to position shapes relative to data points or existing plots.

3. Plotly (Interactive Shapes) #

For interactive shapes (think zooming, panning, or hover effects), Plotly is the way to go. It lets you add shapes directly to its figures and supports user interactions:

import plotly.graph_objects as go

fig = go.Figure()

# Add square
fig.add_shape(
    type="rect",
    x0=0, y0=0, x1=2, y1=2,
    fillcolor="#2196F3", opacity=0.7, line_color="#2196F3"
)

# Add circle
fig.add_shape(
    type="circle",
    x0=3, y0=0, x1=5, y1=2,  # Bounding box for the circle
    fillcolor="#4CAF50", opacity=0.7, line_color="#4CAF50"
)

# Add triangle
fig.add_shape(
    type="polygon",
    x0=6, y0=0, x1=7, y1=2, x2=5, y2=2,
    fillcolor="#FF9800", opacity=0.7, line_color="#FF9800"
)

# Clean up the layout
fig.update_layout(
    xaxis_range=[-0.5, 7.5], yaxis_range=[-0.5, 2.5],
    showlegend=False, plot_bgcolor="white"
)
fig.update_xaxes(visible=False)
fig.update_yaxes(visible=False)

# Render interactive plot in Streamlit
st.plotly_chart(fig)

Users can zoom, pan, and even interact with the shapes (if you add click events or hover tooltips later).

内容的提问来源于stack exchange，提问作者hemang jiwnani