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

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

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

@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}}
}

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

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

In a dashboard, graph a subset of the dataset depending on the value of a checkbox

python

dashboard

plotly

plotly-dash