在仪表板中，根据复选框的值绘制数据集的子集

Question

我使用Dash来绘制一个数据集，该数据集包含x，y的列和另一个用于水果类型的列。我在清单中添加了苹果和葡萄。我现在要做的是让图表显示葡萄的x和y的值，如果勾选葡萄复选框，如果勾选苹果复选框，则显示苹果，如果勾选两者，则显示两者的值。

有人能帮助我吗？这是一个我知道的非常简单的问题。

我知道我需要以某种方式改变'def ... return'部分。

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go

app = dash.Dash()

fruits = {'Day':[1,2,3,4,5,6],
             'Visitors':[43,34,65,56,29,76],
             'Bounce_Rate':[65,67,78,65,45,52],
             'Nice_Fruits':['apple', 'apple', 'grape', 'apple', 'grape', 'grape']}
df_all_fruits = pd.DataFrame(fruits)

Nice_Fruits_list=df_all_fruits['Nice_Fruits'].unique()

app.layout = html.Div(children=[
html.H1('Payment Curve and predictor'),

 html.Label('fruits_1'),
    dcc.Checklist(
    id='fruits_checklist',
    options=[{'label': i, 'value': i} for i in Nice_Fruits_list],
        values=['apple', 'grape'],
    labelStyle={'display': 'inline-block'}
    ),

 dcc.Graph(
        id='fruits_graph',
        figure={
            'data': [
                go.Scatter(
                    x=df_all_fruits['Visitors'],
                    y=df_all_fruits['Bounce_Rate'],
                    mode='markers',
                    opacity=0.7,
                    marker={
                        'size': 15,
                        'line': {'width': 0.5, 'color': 'white'}
                    },
                )
            ],
            'layout': go.Layout(             
        xaxis={'type': 'linear', 'title': 'Visitors'},
                yaxis={'title': 'Bounce_Rate'},
                margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
                hovermode='closest'
            )
        }
    ),

])

@app.callback(
    Output('fruits_graph', 'figure'),
    [Input('fruits_checklist', 'values')]
)


   def update_graph(fruits_checklist_value):
    df = df_all_fruits[df_all_fruits.Nice_Fruits.isin([fruits_checklist_value])]

    return {
        'data': [go.Scatter(
            x= df['Visitors'],
            y= df['Bounce_Rate'],
        mode='markers',
            marker={
                'size': 15,
                'opacity': 0.5,
                'line': {'width': 0.5, 'color': 'white'}
            }
        )],
        'layout': {'margin': {'l': 40, 'r': 0, 't': 20, 'b': 30}}
    }

app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'})

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

Answer 1

所以你想要的是更新你的数据，这就是你所做的，但要做到这一点，你必须在同一个Scatter上放两个图。你确实想要修改回报。您需要迭代复选框中的值。然后你告诉图表将两个散点图放在同一个图表上：

@app.callback(
Output('fruits_graph', 'figure'),
[Input('fruits_checklist', 'values')]
)
def update_graph(values):
      df = df_all_fruits

      return {'data': [go.Scatter(
        x= df[df['Nice_Fruits']==v]['Visitors'],
        y= df[df['Nice_Fruits']==v]['Bounce_Rate'],
    mode='markers',
        marker={
            'size': 15,
            'opacity': 0.5,
            'line': {'width': 0.5, 'color': 'white'}
        }
    ) for v in values],
    'layout': {'margin': {'l': 40, 'r': 0, 't': 20, 'b': 30}}
}

告诉我它是否解决了你的问题。