Использование штриховых графиков для создания заполнителя для точечной линейной диаграммы и точечной карты.
html.Div([
html.Div(id='graphs', children=[
dcc.Graph({'type':'graph', 'index':1}, figure=blank_fig('plotly_dark')),
dcc.Graph({'type':'graph', 'index':1}, figure=blank_fig('plotly_dark'))]
])
Цифры инициализируются с помощью обратного вызова, как вы можете видеть ниже, используя Plotly Express:
fig1 = px.line(x=df.index.seconds, y=df.ft, labels = {'x':'Elasped Time(seconds)', 'y':'feet'}, title = "(feet)", template='plotly_dark')
fig2 = px.scatter_mapbox(df, lat='deg1', lon='deg2', zoom=zoom, height=800,
text=['deltatime: {}'.format(i.total_seconds()) for i in df.index],
title=selected_values['report_type'], center=dict(lat=center[0], lon=center[1]))
fig2.update_layout(
mapbox_style = "white-bg",
mapbox_layers=[{
"below": 'traces',
"sourcetype": "raster",
"sourceattribution": "Low-Res Satellite Imagery",
"source": [f"{self.map_host}/tiles/{{z}}/{{x}}/{{y}}.png"]
}]
)
fig2.update_traces(mode='markers', marker=dict(size=2, color='white'),
hovertemplate='lat: %{lat}'+'<br>lon: %{lon}<br>'+'%{text}')
Во время операции масштабирования на рисунке 1 я получаю выбранный диапазон через обратный вызов. С этим выбранным диапазоном у нас есть список точек, чтобы перейти к параметру selectedpoints
функции update_traces()
. Цель состоит в том, чтобы выделить эти выбранные точки красным цветом, но вместо этого вся линия окрашена в красный цвет.
# retrieved from the relayout input. The xaxis is in seconds.
start = int(unique_data['xaxis.range[0]'])
end = int(unique_data['xaxis.range[1]'])
# using the above values we can then subselect the dataframe
fig = get_figure_with('mapbox') # retrieves the figure for fig2
selected_df = df[(df.index.seconds >= start) & (df.index.seconds <= end)]
points = list(selected_df[['latitude_deg','longitude_deg']].itertuples(index=False, name=None))
fig.update_traces(marker_color='Red', selectedpoints=points)
Возможно ли выделение сегмента графика mapbox? Например, изогнутая часть графика ниже?
Для этого я успешно использовал функцию px.line_mapbox()
.