разместите несколько графиков на одной странице с помощью plotly

#python #plotly

Вопрос:

Я хочу разместить 2 индикатора и группу гистограмм на одной веб-странице, я использую plotly, когда я запускаю код, он помещает индикаторы на одну страницу, а гистограммы на другую страницу. Она-код, который я использую

 trace1 = go.Indicator(
    mode = "gauge number",
    number = {'prefix':'KPI: ','suffix': "%", 'font': {'size': 50}},
    value = indicateur,
    title = 'Indicateur d'usage',
    title_font_size = 50,
    title_font_color = 'black',
    domain = {'row' : 1, 'column' : 1},#{'x': [0,1], 'y': [0,1]},
    gauge = {
        'axis': {'range': [None, 100], 'tickwidth': 1, 'tickcolor': "darkblue"},
        'bar': {'color': "darkblue"},
        'bgcolor': "white",
        'borderwidth': 2,
        'bordercolor': "gray",
        'steps': [
            {'range': [0, 60], 'color': 'red'},
            {'range': [60, 80], 'color': 'orange'},
            {'range': [80, 90], 'color': 'yellow'},
            {'range': [90,100], 'color': 'green'}],
        })
trace2 = go.Indicator(#the same code as trace1)
bar_graph = go.Figure()
bar_graph.add_trace(go.Bar(name='beta', x=df['Erreurs'], y=df['% d'erreur beta']))
bar_graph.add_trace(go.Bar(name='prod', x=df['Erreurs'], y=df['% d'erreur prod']))
bar_graph.add_trace(go.Bar(name='delta', x=df['Erreurs'], y=df['prod-beta']))
fig = make_subplots(
rows=1,
cols=2,
specs=[[{'type' : 'indicator'}, {'type' : 'indicator'}]],)
fig.update_layout(
    font={'color': kpi_color, 'family': "Arial"},
    xaxis={'showgrid': False, 'showticklabels':False, 'range':[-1,1]},
    yaxis={'showgrid': False, 'showticklabels':False, 'range':[0,1]},
    plot_bgcolor='rgba(0,0,0,0)'

    )
fig.append_trace(trace1, row=1, col=1)
fig.append_trace(trace2, row=1, col=2)
bar_graph.update_layout(title_text="Comparaison de taux d'erreur")

fig.show()
bar_graph.show()
 

Ответ №1:

  • смоделировали фрейм данных, чтобы сделать его работоспособным в любой среде, плюс определили две переменные
  • это еще одно расширение make_subplots() того, что вы уже используете. используйте colspecs, чтобы трассировки полос охватывали два столбца
  • конфигурации компоновки xaxis и yaxis вызывают проблемы, поэтому я их прокомментировал
 import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import numpy as np

indicateur = 2.2
kpi_color = "blue"

df = pd.DataFrame(
    {
        "% d'erreur beta": np.random.randint(1, 5, 20),
        "% d'erreur prod": np.random.randint(1, 5, 20),
        "prod-beta": np.random.randint(1, 5, 20),
        "Erreurs": range(20),
    }
)

trace1 = go.Indicator(
    mode="gauge number",
    number={"prefix": "KPI: ", "suffix": "%", "font": {"size": 50}},
    value=indicateur,
    title="Indicateur d'usage",
    title_font_size=50,
    title_font_color="black",
    domain={"row": 1, "column": 1},  # {'x': [0,1], 'y': [0,1]},
    gauge={
        "axis": {"range": [None, 100], "tickwidth": 1, "tickcolor": "darkblue"},
        "bar": {"color": "darkblue"},
        "bgcolor": "white",
        "borderwidth": 2,
        "bordercolor": "gray",
        "steps": [
            {"range": [0, 60], "color": "red"},
            {"range": [60, 80], "color": "orange"},
            {"range": [80, 90], "color": "yellow"},
            {"range": [90, 100], "color": "green"},
        ],
    },
)
trace2 = trace1 # same as first ...
fig = make_subplots(
    rows=2,
    cols=2,
    specs=[[{"type": "indicator"}, {"type": "indicator"}], [{"colspan": 2}, None]],
    subplot_titles=["", "", "Comparaison de taux d'erreur"],
)
fig.update_layout(
    font={"color": kpi_color, "family": "Arial"},
    #     xaxis={'showgrid': False, 'showticklabels':False, 'range':[-1,1]},
    #     yaxis={'showgrid': False, 'showticklabels':False, 'range':[0,1]},
    plot_bgcolor="rgba(0,0,0,0)",
)
fig.append_trace(trace1, row=1, col=1)
fig.append_trace(trace2, row=1, col=2)
fig.add_trace(
    go.Bar(name="beta", x=df["Erreurs"], y=df["% d'erreur beta"]), row=2, col=1
)
fig.add_trace(
    go.Bar(name="prod", x=df["Erreurs"], y=df["% d'erreur prod"]), row=2, col=1
)
fig.add_trace(go.Bar(name="delta", x=df["Erreurs"], y=df["prod-beta"]), row=2, col=1)

fig.update_layout(height=600)
fig.show()
 

Комментарии:

1. большое спасибо, это то, что я хотел, у меня есть еще несколько вопросов: 1) Я хочу изменить цвет значений только под индикатором, но ось и заголовок также меняют цвет. 2) если я хочу добавить некоторую информацию, например, количество пользователей, как это сделать? Спасибо