import json

from dash import Dash, dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
import dash_bootstrap_components as dbc

box = {"margin": "2px", "padding": "2px", "border": "thin lightgrey solid"}  # CSS使用

app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB], title="初识dcc.Graph")
df = pd.DataFrame(
    {
        "x": [1, 2, 1, 2],
        "y": [1, 2, 3, 4],
        "customdata": [1, 2, 3, 4],
        "fruit": ["apple", "apple", "orange", "orange"],
    }
)
fig = px.scatter(df, x="x", y="y", color="fruit", custom_data=["customdata"])
fig.update_layout(clickmode="event+select")  # 可以选择点击事件
fig.update_traces(marker_size=20)  # 点的大小

dccGraph = dcc.Graph(figure=fig)
pHoverData = html.Pre(style=box)
pClickData = html.Pre(style=box)
pSelectData = html.Pre(style=box)
pRelayoutData = html.Pre(style=box)
C1 = dbc.Col([html.H3("Hover Data"), pHoverData])
C2 = dbc.Col([html.H3("Click Data"), pClickData])
C3 = dbc.Col([html.H3("Select Data"), pSelectData])
C4 = dbc.Col([html.H3("Zoom and Relayout Data"), pRelayoutData])
app.layout = dbc.Container([dccGraph, dbc.Row([C1, C2, C3, C4])], style=box, fluid=True)


@app.callback(Output(pHoverData, "children"), Input(dccGraph, "hoverData"))
def display_hover_data(x):
    return json.dumps(x, indent=2)


@app.callback(Output(pClickData, "children"), Input(dccGraph, "clickData"))
def display_click_data(x):
    return json.dumps(x, indent=2)


@app.callback(Output(pSelectData, "children"), Input(dccGraph, "selectedData"))
def display_selected_data(x):
    return json.dumps(x, indent=2)


@app.callback(Output(pRelayoutData, "children"), Input(dccGraph, "relayoutData"))
def display_relayout_data(x):
    return json.dumps(x, indent=2)


if __name__ == "__main__":
    app.run_server(debug=True)

import json

from dash import Dash, dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
import dash_bootstrap_components as dbc

box = {"margin": "2px", "padding": "2px", "border": "thin lightgrey solid"}  # CSS使用

app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB], title="初识dcc.Graph")
df = pd.DataFrame(
    {
        "x": [1, 2, 1, 2],
        "y": [1, 2, 3, 4],
        "customdata": [1, 2, 3, 4],
        "fruit": ["apple", "apple", "orange", "orange"],
    }
)
fig = px.scatter(df, x="x", y="y", color="fruit", custom_data=["customdata"])
fig.update_layout(clickmode="event+select")  # 可以选择点击事件
fig.update_traces(marker_size=20)  # 点的大小

dccGraph = dcc.Graph(figure=fig)
pHoverData = html.Pre(style=box)
pClickData = html.Pre(style=box)
pSelectData = html.Pre(style=box)
pRelayoutData = html.Pre(style=box)
C1 = dbc.Col([html.H3("Hover Data"), pHoverData])
C2 = dbc.Col([html.H3("Click Data"), pClickData])
C3 = dbc.Col([html.H3("Select Data"), pSelectData])
C4 = dbc.Col([html.H3("Zoom and Relayout Data"), pRelayoutData])
app.layout = dbc.Container([dccGraph, dbc.Row([C1, C2, C3, C4])], style=box, fluid=True)


@app.callback(Output(pHoverData, "children"), Input(dccGraph, "hoverData"))
def display_hover_data(x):
    return json.dumps(x, indent=2)


@app.callback(Output(pClickData, "children"), Input(dccGraph, "clickData"))
def display_click_data(x):
    return json.dumps(x, indent=2)


@app.callback(Output(pSelectData, "children"), Input(dccGraph, "selectedData"))
def display_selected_data(x):
    return json.dumps(x, indent=2)


@app.callback(Output(pRelayoutData, "children"), Input(dccGraph, "relayoutData"))
def display_relayout_data(x):
    return json.dumps(x, indent=2)


if __name__ == "__main__":
    app.run_server(debug=True)

# CSS使用 # 可以选择点击事件 # 点的大小