Plotly python: 多项选择互动情节

Question

我希望能够 select 多项而不是一项或全部。到目前为止，我只能 select 一项并显示其图表，或者 select 'all' 并显示所有图表。

我希望能够 select 2 项或更多项，并将它们的图表显示在如下所示的单个图表中。

我是 plotly 的新手，非常感谢任何帮助。非常感谢:)

我的代码：

def interactive_multi_plot(actual, forecast_1, forecast_2, title, addAll = True):
fig = go.Figure()
    

for column in forecast_1.columns.to_list():
    fig.add_trace(
        go.Scatter(
            x = forecast_1.index,
            y = forecast_1[column],
            name = "Forecast_SI"
        )

    )

    
    button_all = dict(label = 'All',
                  method = 'update',
                  args = [{'visible': forecast_1.columns.isin(forecast_1.columns),
                           'title': 'All',
                           'showlegend':True}])
    
for column in forecast_2.columns.to_list():
    fig.add_trace(
        go.Scatter(
            x = forecast_2.index,
            y = forecast_2[column],
            name = "Forecast_LSTM" 
        )

    )

    
    button_all = dict(label = 'All',
                  method = 'update',
                  args = [{'visible': forecast_2.columns.isin(forecast_2.columns),
                           'title': 'All',
                           'showlegend':True}])
for column in actual.columns.to_list():
    fig.add_trace(
        go.Scatter(
            x = actual.index,
            y = actual[column],
            name = "True values" 
        )

    )

    
    button_all = dict(label = 'All',
                  method = 'update',
                  args = [{'visible': actual.columns.isin(actual.columns),
                           'title': 'All',
                           'showlegend':True}])
    
fig.layout.plot_bgcolor = '#010028'
fig.layout.paper_bgcolor = '#010028'
def create_layout_button(column):
    return dict(label = column,
                method = 'update',
                args = [{'visible': actual.columns.isin([column]),
                         'title': column,
                         'showlegend': True}])
fig.update_layout(
    updatemenus=[go.layout.Updatemenu(
        active = 0,
        buttons = ([button_all] * addAll) +  list(actual.columns.map(lambda column: create_layout_button(column)))
        )
    ]     
)
# Update remaining layout properties
fig.update_layout(
    title_text=title,
    height=800,
    font = dict(color='#fff', size=12)
)


fig.show()

Answer 1

这在 dash 中很简单，因为 https://dash.plotly.com/dash-core-components/dropdown 支持多select和搜索

设置
1. 对您的功能进行细微更改。定义跟踪的 meta 属性，以便稍后在破折号回调中使用
2. 模拟一些数据，因为它没有提供问题。三个数据框（实际值、预测 1 和预测 2）
3. 使用修改后的代码创建图形
集成到 dash 应用程序

设置

import pandas as pd
import numpy as np
import plotly.graph_objects as go

def interactive_multi_plot(actual, forecast_1, forecast_2, title, addAll = True):
    fig = go.Figure()
    for column in forecast_1.columns.to_list():
        fig.add_trace(
            go.Scatter(x = forecast_1.index,y = forecast_1[column],name = "Forecast_SI",meta = column))

    for column in forecast_2.columns.to_list():
        fig.add_trace(
            go.Scatter(x = forecast_2.index,y = forecast_2[column],name = "Forecast_LSTM" ,meta = column))
    for column in actual.columns.to_list():
        fig.add_trace(
            go.Scatter(x = actual.index,y = actual[column],name = "True values" ,meta = column))

    fig.layout.plot_bgcolor = '#010028'
    fig.layout.paper_bgcolor = '#010028'

    #  Update remaining layout properties
    fig.update_layout(
        title_text=title,
        height=800,
        font = dict(color='#fff', size=12)
    )

    return fig

S = 100
C = 10

actual = pd.DataFrame({
        c: np.sort(np.random.uniform(0, 600, S))
        for c in [f"{a}{b}-{c}" for a, b, c in zip(np.random.randint(100, 200, C),
                                                   np.random.choice(list("ABCDEF"), C),
                                                   np.random.randint(300, 400, C),)]
})

f1 = actual.assign(**{c:actual[c]*1.1 for c in actual.columns})
f2 = actual.assign(**{c:actual[c]*1.2 for c in actual.columns})

fig = interactive_multi_plot(actual, f1, f2, "Orders")

达世币应用程序

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from jupyter_dash import JupyterDash

# Build App
app = JupyterDash(__name__)
app.layout = html.Div(
    [
        dcc.Dropdown(
            id="lines",
            options=[{"label": c, "value": c} for c in actual.columns.tolist()],
            value=None,
            multi=True
        ),
        dcc.Graph(id="interactive-multiplot", figure=fig),
    ]
)

@app.callback(
    Output("interactive-multiplot", "figure"),
    Input("lines", "value"),
    State("interactive-multiplot", "figure"),
)
def updateGraphCB(lines, fig):
    # filter traces...
    fig = go.Figure(fig).update_traces(visible=False)
    for line in [] if not lines else lines:
        fig.update_traces(visible=True, selector={"meta":line})
    return fig

app.run_server(mode="inline")

Plotly python: 多项选择互动情节

Plotly python: Multiple item selection interactive plot

python

plot

interactive

plotly

设置

达世币应用程序