使用 html 在不同的密度图之间切换

Question

我有两个单独的图形，它们使用回调来过滤空间坐标。这些图包含散点图和热图。是否可以将两者合并到一个图中，但使用

Dropdown

或

RadioItems

来选择一个或另一个？

最终，单个图形将包含多个地图以可视化空间坐标（散点图、热图、十六进制图等）

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

data = pd.DataFrame({
       'Cat': ['t','y','y','y','f','f','j','k','k','k','s','s','s','s'],
       'LAT': [5,6,4,5,4,7,8,9,5,6,18,17,15,16],
       'LON': [10,11,9,11,10,8,8,5,8,7,18,16,16,17],
       })

N = 30
data = pd.concat([data] * N, ignore_index=True)

data['Color'] = data['Cat'].map(dict(zip(data['Cat'].unique(), px.colors.qualitative.Plotly[:len(data['Cat'].unique())])))               

Color = data['Color'].unique()

Type_Category = data['Cat'].unique()
Type_cats = dict(zip(Type_Category, Color)) 


external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets = external_stylesheets)

filtering = html.Div(children=[
    html.Div(children=[
        html.Label('Cats', style = {'paddingTop': '2rem', 'display': 'inline-block'}),
        dcc.Checklist(
            id = 'Cats',
            options = [
                {'label': 't', 'value': 't'},
                {'label': 'y', 'value': 'y'},
                {'label': 'f', 'value': 'f'},
                {'label': 'j', 'value': 'j'},                
                {'label': 'k', 'value': 'k'},
                {'label': 's', 'value': 's'},           
            ],
            value = ['t', 'y', 'f', 'j', 'k', 's'],
        ),
    ], className = "two columns",
    )
])

app.layout = dbc.Container([

    dbc.Row([
        dbc.Col(html.Div(filtering)),
        dbc.Col([
            dbc.Row([
                dbc.Col(dcc.Graph(id = 'scatter-chart')),
            ]),
        ]),
                dbc.Col(dcc.Graph(id = 'heatmap-chart')),
    ])
], fluid = True)


df = data

@app.callback(
    Output('scatter-chart', 'figure'),
    [Input("Cats", "value")])     

def scatter_chart(cats):

    dff = df[df['Cat'].isin(cats)]

    data = px.scatter_mapbox(data_frame = dff, 
                                   lat = 'LAT', 
                                   lon = 'LON',
                                   color = 'Cat',
                                   color_discrete_map = Type_cats,
                                   zoom = 3,
                                   mapbox_style = 'carto-positron', 
                                   )
              
    fig = go.Figure(data = data) 

    return fig


@app.callback(
    Output('heatmap-chart', 'figure'),
    [Input("Cats", "value")])     

def heatmap_chart(cats):

    dff = df[df['Cat'].isin(cats)]

    # Creating 2-D grid of features 
    [X, Y] = np.meshgrid(dff['LAT'], dff['LON']) 

    Z = np.cos(X / 2) + np.sin(Y / 4) 

    fig = go.Figure(data =
           go.Densitymapbox(lat = dff['LON'], 
                            lon = dff['LAT'],   
                            z = Z,
                            )
                    )

    fig.update_layout(mapbox_style = "carto-positron")

    return fig   


if __name__ == '__main__':
    app.run_server(debug=True, port = 8051)