Python使用Plotly制作交互式图表的操作指南

import plotly.graph_objects as go

fig = go.Figure()

# 添加多条折线
fig.add_trace(go.Scatter(y=[2, 1, 3], name="Line 1"))
fig.add_trace(go.Scatter(y=[3, 2, 1], name="Line 2"))

# 配置 updatemenus
fig.update_layout(
    updatemenus=[
        dict(
            type="buttons",
            direction="right",
            buttons=[
                dict(label="Show All", method="update", args=[{"visible": [True, True]}]),
                dict(label="Show Line 1", method="update", args=[{"visible": [True, False]}]),
                dict(label="Show Line 2", method="update", args=[{"visible": [False, True]}]),
            ],
        )
    ]
)

fig.show()

import plotly.express as px
import numpy as np

# 模拟大数据
np.random.seed(42)
x = np.random.rand(100_000)
y = np.random.rand(100_000)

# 使用 WebGL 加速的散点图
fig = px.scatter(x=x, y=y, render_mode='webgl', title="WebGL Accelerated Scatter Plot")
fig.show()

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)

app.layout = html.Div([
    dcc.Input(id="input", value="Hello Plotly!", type="text"),
    html.Div(id="output")
])

@app.callback(Output("output", "children"), [Input("input", "value")])
def update_output(value):
    return f"You entered: {value}"

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

import plotly.express as px

df = px.data.gapminder().query("continent=='Oceania'")
fig = px.line(df, x="year", y="lifeExp", color="country", template="plotly_dark")
fig.show()

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

# 模拟疫情数据
data = {
    "date": pd.date_range(start="2020-01-01", periods=100),
    "cases": [i**2 for i in range(100)],
    "deaths": [i * 5 for i in range(100)]
}
df = pd.DataFrame(data)

app = Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id="graph"),
    dcc.Slider(
        id="year-slider",
        min=0,
        max=len(df) - 1,
        value=0,
        marks={i: str(df["date"][i].date()) for i in range(0, len(df), 10)},
        step=None
    )
])

@app.callback(Output("graph", "figure"), [Input("year-slider", "value")])
def update_graph(selected_index):
    filtered_df = df.iloc[:selected_index + 1]
    fig = px.line(filtered_df, x="date", y=["cases", "deaths"], title="Covid-19 Cases Over Time")
    return fig

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

import plotly.graph_objects as go
import numpy as np

# 创建 3D 体素数据
x, y, z = np.indices((8, 8, 8))
cube1 = (x < 3) & (y < 3) & (z < 3)
cube2 = (x >= 5) & (y >= 5) & (z >= 5)
voxelarray = cube1 | cube2

colors = np.empty(voxelarray.shape, dtype=object)
colors[cube1] = 'blue'
colors[cube2] = 'red'

# 绘制 3D 体素图
fig = go.Figure(data=go.Volume(
    x=x.flatten(),
    y=y.flatten(),
    z=z.flatten(),
    value=voxelarray.flatten(),
    colorscale=["blue", "red"],
    opacity=0.2,
    surface_count=17
))

fig.show()

// 示例：Three.js 与 Plotly 结合的伪代码
// 在 Three.js 场景中嵌入 Plotly 图表

# 示例：记录用户点击行为
from dash import Dash, dcc, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    dcc.Graph(id="graph", figure=px.bar(x=[1, 2, 3], y=[3, 2, 1])),
    html.Button("Option A", id="button-a"),
    html.Button("Option B", id="button-b"),
    html.Div(id="output")
])

@app.callback(Output("output", "children"), [Input("button-a", "n_clicks"), Input("button-b", "n_clicks")])
def update_output(clicks_a, clicks_b):
    return f"Option A clicks: {clicks_a or 0}, Option B clicks: {clicks_b or 0}"

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