python - 如何在 plotly Dash 中使用两个 DatePickerRange 创建线图？

Question

我目前正在处理仪表板，我想在其中制作 2 个线图，一个在另一个之下：

1. 这是一般的一个有一个下拉列表和一个我能够得到的 datepickerrange。

（图2） 但在2中。我想要比较折线图，其中我需要1个下拉列表和2个datepickerrange：首先它将从下载、安装、卸载中选择参数，然后只能选择这两个datepickerrange：选择范围后在两个 datepickerrange 中，日期集将分为这两个日期范围，然后它将显示由两条趋势线组成的折线图：

1. 一个是第一个 datepickerrange 的结果，另一个是第二个 datepickerrange 的结果：由于日期不同，它将显示 Day1、Day2、3... 就像我们选择假设 1-06-2021 到 6-06-2021 作为第一个datepickerrange 和 9-06-2021 到 14-06-2021 作为第二个 datepickerrange 然后它将 x 轴作为 Day - 1, 2, 3, 4, 5, 6 而不是日期和第一个 datepicker 的长度应该等于长度第 2 名。

例如：如果我们选择参数安装并从日期选择器中选择上述日期范围，则应显示为：（图 2）

第一行是任何一个参数（安装、卸载、下载）作为 datepicker1 结果的子划分，另一行是 datepicker2 结果

这是我拥有的日期类型：

start       Installations   Uninstallations Downloads
2021-05-12  5866.0          2243.0          104.0
2021-05-13  4695.0          1928.0          101.0
2021-05-14  4100.0          1621.0          85.0
2021-05-15  3732.0          1510.0          70.0
2021-05-16  4005.0          1506.0          90.0
2021-05-17  4082.0          1718.0          107.0
2021-05-18  3904.0          1698.0          68.0
2021-05-19  4731.0          2574.0          106.0
2021-05-20  4066.0          2012.0          84.0
2021-05-21  3737.0          1725.0          70.0
2021-05-22  3683.0          1670.0          85.0
2021-05-23  3188.0          1344.0          56.0
2021-05-24  3054.0          1173.0          79.0

到目前为止，我已经编写了这段代码：

import pandas as pd
import numpy as np
import seaborn as sns
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import *
import matplotlib.pyplot as plt
import seaborn as sns
import plotly.express as px
import plotly.graph_objects as go

app.layout = html.Div([
                       html.H1("JupyterDash Demo"),
                       dcc.DatePickerRange(
                    id="date-range",
                    min_date_allowed=data.start.min().date(),
                    max_date_allowed=data.start.max().date(),
                    start_date=data.start.min().date(),
                    end_date=data.start.max().date(),
                ),

                       
                       
        html.Div([       
        html.Div([
                            dcc.Dropdown(id="summary_dropdown",
                            options=[{'label':'Installations','value':'Installations'},
                                     {'label':'Uninstallations','value':'Uninstallations'},
                                     {'label':'Downloads','value':'Downloads'}],
                            multi=True,
                            clearable=True),   
            
        dcc.Graph(id='Summary',figure=px.line(data,x='start',y=filtered_column,height=350,width=700,title='<b>Installations,Uninstallations,Downloads</b>')
#                                             title='<b>Registrations, Subscriptionattempt & Subscriptions</b>')
        )], className="four rows"), 
        html.Div([
                            dcc.Graph(id='sub-detail',
                                figure=px.line(data,x='start',y=filtered_column,height=350,width=700)
                            )], className="four columns")
    ], className="row")
])

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


@app.callback(
     [
        Output("Summary", "figure"),
        Output("sub-detail", "figure")],
    [
        Input("date-range", "start_date"),
        Input("date-range", "end_date"),
        Input("summary_dropdown", "value"),
    ],
)
def update_charts(start_date, end_date,summary_dropdown):

    mask = (
            (data.start >= start_date)
        & (data.start <= end_date)
    )
    filtered_data = data.loc[mask, :]

    if summary_dropdown in [None,[]]:
        pr_chart_figure = px.line(filtered_data,x='start',y=filtered_column,height=350,width=700)
        vol_chart_figure = px.line(filtered_data,x='start',y=filtered_column,height=350,width=700)
    else:
        pr_chart_figure = px.line(filtered_data,x='start',y=summary_dropdown,height=500,width=700)
        vol_chart_figure = px.line(filtered_data,x='start',y=summary_dropdown,height=350,width=700)
    
    return pr_chart_figure, vol_chart_figure
# ,vol_chart_figure

结果如下：

请帮我纠正这个问题。

标签： pythonplotlydata-visualizationplotly-dash