Altair-Plots in Streamlit: Wie füge ich eine Legende hinzu?

Frageninhalt

Ich verwende Streamlit und benötige Altair zum Zeichnen (wegen der verfügbaren Interpolationsoption).

Angesichts dieses einfachen Codes:

import streamlit as st
import altair as alt
import pandas as pd

data = pd.DataFrame({"x": [0, 1, 2, 3], "y": [0, 10, 15, 20], "z": [10, 8, 10, 1]})

base = alt.Chart(data.reset_index()).encode(x="x")

chart = alt.layer(
    base.mark_line(color="red").encode(y="y", color=alt.value("green")),
    base.mark_line(color="red").encode(y="z", color=alt.value("red")),
).properties(title="My plot",)

st.altair_chart(chart, theme="streamlit", use_container_width=True)

Dadurch ergibt sich diese Grafik:

Wie füge ich neben einer Figur richtig eine Legende hinzu?

In der Dokumentation sehe ich die Legendenoption als Teil von „Farbe“, aber hier scheint es immer um die Visualisierung einer anderen Dimension zu gehen. In meinem Fall möchte ich einfach verschiedene Linien zeichnen und die Legende mit ihren jeweiligen Farben darstellen.

Richtige Antwort

Konvertieren Sie Ihre Daten in das lange Datenrahmenformat. Dieses Format eignet sich besser zum Erstellen von Legenden in Altair, da jede Zeile einer Kategorie zugeordnet ist. Dann nutzen Sie diese Kategorie zur Farbkodierung:

import streamlit as st
import altair as alt
import pandas as pd
alt.renderers.enable("html")

# Your data
data = pd.DataFrame({
    "x": [0, 1, 2, 3],
    "y": [0, 10, 15, 20],
    "z": [10, 8, 10, 1]
})


# Transform data to long format
data_long = pd.melt(data, id_vars=['x'], value_vars=['y', 'z'], var_name='category', value_name='y,z')

# Create an Altair chart
chart = alt.Chart(data_long).mark_line().encode(
    x='x',
    y='y,z',
    color='category:N'  # Use the category field for color encoding
).properties(
    title="My plot"
)


st.altair_chart(chart, use_container_width=True)

Ausgabe:

Das obige ist der detaillierte Inhalt vonAltair-Plots in Streamlit: Wie füge ich eine Legende hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!