Dash Plotly: возможно ли сложить значения всех трасс?

#plotly #plotly-dash

Вопрос:

Допустим, у меня есть этот код:

 import pandas as pd
import numpy as np
import plotly.express as px
from dash.dependencies import Output, Input
from dash import dcc
from dash import html
import dash


df_a = pd.DataFrame({"time":pd.Series(pd.date_range("1-nov-2021","2-nov-2021", freq="S")).sample(60),
             "bacteria_count":np.random.randint(0,500, 60), "bacteria_type":np.random.choice(list("ABCDEFGHIJKL"),60)})

df_a["epoch_time_ms"] = df_a["time"].astype(int) / 1000
df_a = df_a.sort_values("time")
fig_a = px.line(df_a, x="time", y="bacteria_count", line_shape="hv", color='bacteria_type')
fig_a.update_layout(hovermode='x unified')


app = dash.Dash(__name__)  # call flask server
app.layout = html.Div(children=[
                          html.Div([
                              html.Div([
                                  html.H1(children='G_A'),
                                  dcc.Graph(id='fig_a-graph', figure=fig_a)
                              ], className='row')
                          ])])


if __name__ == '__main__':
    app.run_server(debug=True, port=8086)
 

График будет содержать 11 трасс.

Интересно, можно ли сложить значения всех трасс в 1 единую трассу на отдельном графике? Это можно легко сделать в Grafana, поскольку на стороне клиента (в браузере) пользователь может включить «stacking» (я не помню точный термин, который использует Grafana).

В этой статье говорится transform , что она устарела в более новой версии Plotly: Note transforms are deprecated in plotly v5 and will be removed in a future version.

Итак, что я могу сделать, кроме использования pandas для массирования данных?

Спасибо!

Ответ №1:

Вы можете перебирать трассы и извлекать массивы x и y. Затем вы можете создать из этого новую фигуру. Вы можете использовать эту цифру или использовать трассировку внутри нее в исходном рисунке.

 import pandas as pd
import numpy as np
import plotly.express as px
from dash.dependencies import Output, Input
from dash import dcc
from dash import html
import dash


df_a = pd.DataFrame(
    {
        "time": pd.Series(pd.date_range("1-nov-2021", "2-nov-2021", freq="S")).sample(
            60
        ),
        "bacteria_count": np.random.randint(0, 500, 60),
        "bacteria_type": np.random.choice(list("ABCDEFGHIJKL"), 60),
    }
)

# df_a["epoch_time_ms"] = df_a["time"].astype(int) / 1000
df_a = df_a.sort_values("time")
fig_a = px.line(
    df_a, x="time", y="bacteria_count", line_shape="hv", color="bacteria_type"
)
fig_a.update_layout(hovermode="x unified")

fig_t = px.line(
    pd.concat([pd.DataFrame({"x": t.x, "y": t.y}) for t in fig_a.data])
    .groupby("x", as_index=False)
    .sum(),
    x="x",
    y="y",
    line_shape="hv",
).update_traces(line_width=4, line_dash="dot", line_color="black")

fig_a.add_traces(fig_t.data)