在Dash中清除下拉列表时无法显示图形

问题描述

我构建了一个破折号应用程序，以显示tips数据集中的total_bill与tip的散点图.我有一个下拉菜单，可以选择多个日期，以便可以通过选择的days来为散点图着色.

I built a dash app to show scatter plot of total_bill vs tip from tips dataset. I have a dropdown menu that allows multiple selection of days, so that I can color the scatter plot by those selected days.

我需要的是，当从下拉列表中未选择任何内容时，散点图将按天着色.如果通过下拉菜单选择了一天或几天，则散点图仅由那些选定的日期涂上颜色.

What I need is when nothing is selected from dropdown, the scatter plot is colored by all days. When one or multiple days are selected through dropdown, the scatter plot is colored just by those selected days.

我的应用代码如下.问题是，当我清除下拉菜单时，图形也将变为空.它应该显示一个散点图，整天都是彩色的.

My app code is below. The issue is when I clear the dropdown, the graph also becomes empty. It supposed to show a scatter plot colored by all days.

有人知道为什么会这样吗?我该如何解决该问题.我在此上花费了数小时，但找不到解决方案.

Does any one know why that happens? How can I fix the issue. I spend hours on this, but unable to find solution.

非常感谢.

import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc
import seaborn as sns
import plotly_express as px

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# load dataset
tips = sns.load_dataset("tips")
days = ['Thur', 'Fri', 'Sat', 'Sun']
#layout
app.layout = html.Div([
    html.P('select days'),
    dcc.Dropdown(
        id='days',
        options= [{'label': k, 'value':k} for k in days],
        value = None,
        multi=True),
    dcc.Graph(id="graph")
])

#funtion to plot tips scatter plot
def plot_tips(data=tips, days=None):
    if days is not None:
        data=data[data.day.isin(days)]
    fig = px.scatter(data, x='total_bill', y='tip', color='day')
    return (fig)

#callback
@app.callback(
    Output('graph', "figure"),
    [Input('days', 'value') ] )
def make_figure(days):
    fig = plot_tips(data = tips, days= days)
    return (fig)


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

推荐答案

这可能是这样的(Dash v1.6.0):

This could be something like this (Dash v1.6.0):

import dash
import dash_html_components as html
import dash_core_components as dcc
import seaborn as sns
import plotly.express as px

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

tips = sns.load_dataset("tips")
all_days = ['Thur', 'Fri', 'Sat', 'Sun']

app.layout = html.Div([
    html.P('select days'),
    dcc.Dropdown(
        id='days',
        options= [{'label': k, 'value':k} for k in all_days],
        value = None,
        multi=True),
    dcc.Graph(id="graph")
])

def plot_tips(data=tips, days=None):
    if days is not None:
        data=data[data.day.isin(days)]
        fig = px.scatter(data, x='total_bill', y='tip', color='day')
    else:
        data=data[data.day.isin(all_days)]
        fig = px.scatter(data, x='total_bill', y='tip', color='day')
    return (fig)

@app.callback(
    dash.dependencies.Output('graph', "figure"),
    [dash.dependencies.Input('days', 'value') ] )
def make_figure(days):
    fig = plot_tips(data = tips, days= days)
    return (fig)

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

请注意，颜色是动态分配的，并且不一致，因此例如如果显示所有颜色，则星期四为绿色，但单独选择时为蓝色.这不直观，可以改进.

Please note that colours are assigned dynamically and are not consistent so e.g. Thursday is green if all colours are shown but becomes blue when selected on its own. This is not intuitive and could be improved.

这篇关于在Dash中清除下拉列表时无法显示图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！