问Python Dash -时间滑块上的标记格式

EN

import pandas as pd
import numpy as np
    
import plotly.graph_objects as go
import plotly.express as px
    
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
    
    
df = [[-77.070033, 38.955367, 20200101],
          [-74.070033, 38.955367, 20200101],
          [-77.070033, 38.755367, 20200102],
          [-77.070033, 38.655367, 20200102],
          [-77.070033, 38.555367, 20200103],
          [-77.070033, 38.455367, 20200104],
          [-77.070033, 38.955367, 20200105],
          [-77.070033, 38.955367, 20200106],
          [-77.040033, 38.955367, 20200108],
          [-77.090033, 38.155367, 20200115],
          [-77.050033, 38.055367, 20200116],
          [-77.070033, 38.655367, 20200124],
          [-77.070033, 39.955367, 20200124],
          [-77.070033, 40.955367, 20200125],
          [-76.070033, 38.955367, 20200131],
          [-74.070033, 38.955367, 20200201]]
    
df=pd.DataFrame(df,columns=['X','Y','Date']) 
df['DateCount'] = df['Date'].factorize()[0] + 1
    
    
fig = go.Figure()
    
fig = px.scatter_mapbox(df, lat="Y", lon="X", hover_data={"Date":True,
                                                              "X":False,
                                                              "Y":False},
                             zoom=10, height=600)
    
fig.update_layout(mapbox_style="stamen-terrain",autosize=True,hovermode='closest')
    
    
    
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets) 
app.layout = html.Div([
      html.Div([
            html.H3('Example Map', style={'text-align': 'center'})
      ], className="row"),
    
      html.Div([
         dcc.Graph(figure=fig, id='map')
      ], className="row"),

      html.Div([
            dcc.Slider(id='slider',
                       min=df['DateCount'].min(),
                       max=df['DateCount'].max(),
                       value=[df['DateCount'].max()],
                       marks={str(date): str(date) for date in df['DateCount'].unique()},
                       step=None)

      ], className="row")
    
    
])

    
@app.callback(
     Output('map','figure'),
     Input('slider','value'))

def update_figure(selected_date):
        filtered_df = df[(df.DateCount <= selected_date)]

    
    
        fig = px.scatter_mapbox(filtered_df, lat="Y", lon="X", zoom=10, height=550,
                            hover_data={"Date":True,
                                        "X":False,
                                        "Y":False}
                        )

        fig.update_layout(mapbox_style="stamen-terrain")


        fig.update_geos(fitbounds="locations")
        fig['layout']['uirevision'] = 2


        return fig



app.run_server(host='0.0.0.0',port='8050')