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

Posted 2023-03-22

【中文标题】在仪表板中，根据复选框的值绘制数据集的子集

【英文标题】：In a dashboard, graph a subset of the dataset depending on the value of a checkbox

【发布时间】：2019-02-17 04:48:44

【问题描述】：

我正在使用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()

【参考方案1】：

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

@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

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