用于多个仪表板的单个日期选择器

Question

我想使用 dash_table 在多个表中选择日期。这在为每个表格使用不同的日期选择器时有效，但在为所有单独的表格使用单个日期选择器时无效。

一个简单的可重现示例显示了一个表格，可以选择并显示不同日期的数据（此处为 1 月 1 日、2 日或 3 日）。

我的问题：如何使用单个日期选择器（不是三个）制作三张表格，每个国家一张表格。非常感谢您的任何建议！

模块

import pandas as pd
import plotly.graph_objs as go
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, Event
import datetime
from datetime import datetime as dt

虚构数据帧

df = pd.DataFrame({'dd':['2019-01-01', '2019-01-01', '2019-01-01', '2019-01-02', '2019-01-02', '2019-01-02', '2019-01-03', '2019-01-03'], 'country':['Belgium', 'Belgium','France', 'France', 'Belgium', 'France', 'Belgium', 'Germany'], 'value':[10,20,30,10,15,25,5,70]})

脚本

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config['suppress_callback_exceptions']=True

currentday = 1
currentmonth = 1
currentyear = 2019

app.layout = html.Div(
    [
        html.H4('All countries'),
        dcc.DatePickerSingle(
            id='my-date-picker-single1',
            min_date_allowed=dt(2012, 1, 1),
            max_date_allowed=dt(2019, 2, 25),
            initial_visible_month=dt(currentyear, currentmonth, currentday),
            date=dt(currentyear, currentmonth, currentday),
            disabled=False
        ),

        dcc.Store(id="selected-rows1", storage_type="memory"),
        html.Div(id="tables-container1"),
        dash_table.DataTable(
            id="table1",
            columns=[{"name": i, "id": i} for i in ['dd', 'country', 'value'] ],

            style_cell_conditional=[
                {
                    'if':{'filter':'Country eq "France"'},
                    'backgroundColor':'rgb(150, 150, 150)'
                }


            ] + [
                {'if': {'column_id': c},
                 'textAlign': 'left'
                } for c in ['dd', 'country']
            ],

            sorting=True,
            sorting_type='multi',
            sorting_settings=[],
        )

    ]
)


@app.callback(
    Output("selected-rows1", "data"),
    [Input("my-date-picker-single1", "date")],
    [State("selected-rows1", "data")],
)

def display_output(value, storage):
    if value is not None:
        return {"selected_rows1": df[df["dd"].str.contains(value)].to_json()}

@app.callback(
    Output("table1", "data"),
    [Input("table1", "sorting_settings"), Input("selected-rows1", "data")],
)
def update_graph(sorting_settings, rows):
    _df = pd.read_json(rows["selected_rows1"])
    if sorting_settings is not None and len(sorting_settings):
        for setting in sorting_settings:
            _df.sort_values(
                by=setting["column_id"],
                ascending=(setting["direction"] == "asc"),
                inplace=True,
            )

        return _df.to_dict("rows")

    else:
        return _df.to_dict("rows")

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

非常感谢您的建议！

Answer 1

您应该使用multiple callbacks。检查“多个输出”部分。示例：

@app.callback(
    Output("selected-rows1", "data"),
    [Input("my-date-picker-single1", "date")],
    [State("selected-rows1", "data")])
def display_output_1(value, storage):
    if value is not None:
        return {"selected_rows1": df[df["dd"].str.contains(value)].to_json()}

@app.callback(
    Output("selected-rows2", "data"),
    [Input("my-date-picker-single1", "date")],
    [State("selected-rows2", "data")])
def display_output_2(value, storage):
    if value is not None:
        return {"selected_rows2": df[df["dd"].str.contains(value)].to_json()}