Maison >développement back-end >Tutoriel Python >Altair Plots dans Streamlit : Comment ajouter une légende ?

Altair Plots dans Streamlit : Comment ajouter une légende ?

WBOY
WBOYavant
2024-02-09 13:30:041346parcourir

Streamlit 中的 Altair 绘图:如何添加图例?

Contenu de la question

J'utilise streamlit et j'ai besoin d'altair pour dessiner (en raison de l'option d'interpolation disponible).

Étant donné ce code simple :

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)

Cela donne ce graphique :

Quelle est la bonne façon d'ajouter une légende à côté d'une figure ?

Dans la documentation, je vois l'option légende comme faisant partie de la "couleur", mais cela semble toujours concerner la visualisation d'une autre dimension. Dans mon cas, je veux juste tracer différentes lignes et tracer la légende avec leurs couleurs respectives.


Réponse correcte


Convertissez vos données au format de trame de données longue. Ce format est plus adapté à la création de légendes dans altair car chaque ligne est associée à une catégorie. Utilisez ensuite cette catégorie pour le codage couleur :

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)

Sortie :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer