Plotly-Dash scrollZoom = False 移动设备不像桌面设备那样工作

Question

我正在创建一个使用 plotly-dash density_mapbox 的破折号应用程序，我想禁用用户缩放的功能，因为它会影响热图的半径并歪曲这个特定的数据集，在我看来。

在 dcc.Graph 的 config 中设置 scrollZoom = False 在桌面上按预期工作——用户不能缩放，但可以平移和四处移动，并与图形交互。然而，在移动设备上 scrollZoom = False 似乎没有任何作用——用户仍然可以放大和缩小。

staticPlot = True 是推荐的解决方案，但这行不通，因为我希望悬停时可以查看数据点。使图表静态化会删除所有交互。

下面是带有示例数据集的示例代码。

import pandas as pd
import plotly.graph_objs as go
import plotly.express as px
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc

rgba = 'rgba(248, 246, 243, 1)'

date = [1,1,2,2]
lat = [30, 31, 30, 31]
longs = [-90, -93, -90, -93]
loc = ['Point A', 'Point B', 'Point A', 'Point B']
count = [300, 450, 310, 600]
lwr = 0
upr = 600

df = pd.DataFrame(zip(date, lat,longs,loc,count), columns=['Date','lat','long','Location','count'])

# Initialize the app server, starting info, and rgba of background
app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags = [{'name': 'viewport',
                             'content': 'width=device-width, initial-scale=1'
                            }]
                   )

# ------------------------------------------------------------------------------
# App layout (REMEMBER, BOOTSTRAP LAYOUT HAS 12 COLUMNS)
app.layout = dbc.Container([
    
        # Row 1
        dbc.Row([
        
        # Row 1, Column 1 -- The Date Select Slider
        dbc.Col([
            dcc.Slider(id='select_date',
                       min=1, 
                       max=2, 
                       value=1,
                           marks={
                               1: 'Date 1',
                               2: 'Date 2'
                           },
                       included=False
                      )
        ],
            width={'size': 12, 'offset': 0},
            style={'height': '10vh', 'backgroundColor': rgba},
            align='center'
        ),
            
    ], no_gutters=True, align='center', justify='center'),
    
        # Row 2
        dbc.Row([
        
        # Row 2, Column 1 -- The Migration Map
        dbc.Col([       
            dcc.Graph(id='migration_map',
                      figure={},
                      config={'displayModeBar': False
                              ,'scrollZoom': False # This gets rid of the ability to zoom, BUT ONLY ON DESKTOP
                             }, 
                      responsive=True,
                      style={'height': '80vh', 'top': '50%', 'left': '50%', 'backgroundColor': rgba}
                     ),
        ],
            width={'size': 12, 'offset': 0},
            style={'height': '90vh', 'backgroundColor': rgba}
        ),
        
    ], no_gutters=True, align='center', justify='center'),
    
], fluid=True, style={'backgroundColor': rgba})

# ------------------------------------------------------------------------------
# Connect the Plotly graphs with Dash Components
@app.callback(
    Output(component_id='migration_map', component_property='figure'),
    Input(component_id='select_date', component_property='value')
)

def update_graph(selected_date):
    
    ###############################################
    ##### Start forming the desired DataFrame #####
    ###############################################
    
    dff = df.copy()
    
    dff = dff[(dff['Date'] == selected_date)]

    # Create the figure
    fig = px.density_mapbox(dff
                            ,lat='lat'
                            ,lon='long'
                            ,z='count'
                            ,hover_name='Location'
                            ,center=dict(lat=39, lon=-91)
                            ,zoom=3.475
                            ,mapbox_style='carto-positron'
                            ,opacity = 0.4
                            ,radius = 25
                            ,range_color = [lwr, upr]
                            ,color_continuous_scale=['rgb(0,0,0)',
                                                     'rgb(19,48,239)',
                                                     'rgb(115,249,253)',
                                                     'rgb(114,245,77)',
                                                     'rgb(254,251,84)',
                                                     'rgb(235,70,38)']
    #                             ,color_continuous_scale='inferno'
                           )


    return fig


# ------------------------------------------------------------------------------
if __name__ == '__main__':
    app.run_server()

Answer 1

对于后来发现此问题的任何人，请关注问题及其解决方案 here。

Plotly-Dash scrollZoom = False 移动设备不像桌面设备那样工作

Plotly-Dash scrollZoom = False for mobile not working as on desktop

python

mobile

plotly-dash