Блог

Я работаю над созданием карты с помощью Dash на Python, и у меня возникли некоторые проблемы с ползунком времени. Первоначально у меня был день в качестве входных данных для ползунка времени, но всякий раз, когда был разрыв с датой с 1 января по 3 января или просто переход от одного месяца к другому (например, с 31 января по 1 февраля), на ползунке времени был пробел. Я хотел, чтобы метки на моем ползунке времени были равномерно распределены. Итак, я преобразовал даты просто в числа. День 1, 2, 3 и так далее, независимо от того, были ли они последовательными днями. Казалось, это решило проблему пробелов на ползунке времени, но теперь я не уверен, как правильно маркировать метки, не помечая их явно для каждой даты.

Вот воспроизводимый пример:

 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') 
 

Может кто-нибудь помочь мне понять, как я могу использовать даты для обозначения последовательных чисел в ползунке времени?

Спасибо!

Я думаю, что это может сработать:

 marks={each : {"label": str(date), "style": {"transform": "rotate(45deg)"}} for each, date in enumerate(df['Date'].unique())}