在带有Dash的单选项目的图形之间切换 [英] switching between graphs with radio items in Dash

问题描述

我是Dash的新手，我想开发一个应用程序，该应用程序具有在两个图形之间切换的单选项目.我不知道该怎么做.任何帮助将不胜感激.我已经写了一段代码，但是我不知道我是否接近.如果可能的话，我想在最后做的散点图和散点图2之间交换.

I am new with Dash and I want to make an app with radio items that switch between two graphs. I am not sure how to do it though. Any help would be highly appreciated. I’ve written a piece of code but i don’t know if I’m close. i would like to swap between the scatterplot and scatterplot2 that i make at the end if it is possible.

import numpy as np
import pandas as pd
import plotly 
import plotly.express as px

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

df = pd.read_csv('DATA.csv')
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    html.Div(
        dcc.Graph(id='graph1',
                  style={'height': 400, 'width': 800}
                  ),
    ),
    html.Div(
        dcc.Graph(id='graph2',
                  style={'height': 400, 'width': 800}
                  ),

    ),
    html.Div([
                html.Label(['Choose a graph:'],style={'font-weight': 'bold'}),
                dcc.RadioItems(
                    id='radio',
                    options=[
                             {'label': 'graph1', 'value': 'graph1'},
                             {'label': 'graph2', 'value': 'graph2'},
                    ],
                    value='age',
                    style={"width": "60%"}
                ),
        ])

])


# ---------------------------------------------------------------
@app.callback(
    Output('graph1', 'figure'),
    Output('graph2', 'figure'),
    [Input(component_id='radio', component_property='value')]
)
def build_graph(radio):

     scatterplot = px.scatter(
        df,
        x="D",
        y="B",
        color="C",
        size_max=20,  # differentiate markers by color
        opacity=0.90,

    )
      scatterplot2 = px.scatter(
        df,
        x="A",
        y="B",
        color="C",
        size_max=20,  # differentiate markers by color
        opacity=0.90

    return scatterplot, scatterplot2
if __name__ == '__main__':
    app.run_server(debug=True)

推荐答案

您的回调中不能有2个输出.您是这样做的:

You cannot have 2 outputs in your callback. You do it like this:

import numpy as np
import pandas as pd
import plotly
import plotly.express as px

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

df = pd.read_csv('DATA.csv')
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    html.Div(
        dcc.Graph(id='graph',
                  style={'height': 400, 'width': 800}
                  ),
    ),
    html.Div([
                html.Label(['Choose a graph:'],style={'font-weight': 'bold'}),
                dcc.RadioItems(
                    id='radio',
                    options=[
                             {'label': 'graph1', 'value': 'graph1'},
                             {'label': 'graph2', 'value': 'graph2'},
                    ],
                    value='age',
                    style={"width": "60%"}
                ),
        ])

])


# ---------------------------------------------------------------
@app.callback(
    Output('graph', 'figure'),
    [Input(component_id='radio', component_property='value')]
)
def build_graph(value):
    if value == 'graph1':
        return px.scatter(
            df,
            x="D",
            y="B",
            color="C",
            size_max=20,  # differentiate markers by color
            opacity=0.90)

    else:
        return px.scatter(
            df,
            x="A",
            y="B",
            color="C",
            size_max=20,  # differentiate markers by color
            opacity=0.90)

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

这篇关于在带有Dash的单选项目的图形之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！