使用破折号绘制带有下拉菜单的 y 轴

Posted

技术标签:

【中文标题】使用破折号绘制带有下拉菜单的 y 轴【英文标题】:plotly graph y-axis with dropdown using dash 【发布时间】:2021-10-29 13:41:17 【问题描述】:

我一直坚持创建响应式图表:

有人知道我做错了什么吗?

# Build App
app = JupyterDash(__name__)
app.layout = html.Div([
    html.H1("Index Scatterplot"),
    dcc.Graph(id='graph'),
    html.Label([
        "constituent",
        dcc.Dropdown(
            id='constituent-dropdown', clearable=False,
            value='AAPL.O', options=[
                'label': c, 'value': c
                for c in ['AAPL.O', 'AMZN.O', 'TSLA.O']
            ]),
])# Define callback to update graph

@app.callback(
    Output('graph', 'figure'),
    [Input("constituent-dropdown", "value")]
)

def update_figure(constituent):
    return px.scatter(
        data, x=".SPX", y=constituent, color="size",
        color_continuous_scale='plasma',
        render_mode="webgl", title="Return Distribution"
    )# Run app and display result inline in the notebook

app.run_server(mode='inline', port=XXXX)

文件“C:xxxx.py”,第 21 行 def update_figure(成分): ^ SyntaxError: 无效语法

这是我使用的基本代码,用于更改颜色。

# Build App
app = JupyterDash(__name__)
app.layout = html.Div([
    html.H1("Index Scatterplot"),
    dcc.Graph(id='graph'),
    html.Label([
        "colorscale",
        dcc.Dropdown(
            id='colorscale-dropdown', clearable=False,
            value='plasma', options=[
                'label': c, 'value': c
                for c in px.colors.named_colorscales()
            ])
    ]),
])# Define callback to update graph

@app.callback(
    Output('graph', 'figure'),
    [Input("colorscale-dropdown", "value")]
)

def update_figure(colorscale):
    return px.scatter(
        data, x=".SPX", y="AAPL.O", color="size",
        color_continuous_scale=colorscale,
        render_mode="webgl", title="Return Distribution"
    )# Run app and display result inline in the notebook

app.run_server(mode='inline', port=XXXX)

感谢任何帮助。

【问题讨论】:

【参考方案1】: 为了使您的代码正常工作,我需要获取 数据 您的核心问题是无与伦比的紧密方括号和圆括号。我建议使用代码格式化程序来帮助解决这个问题 包含在回调中定义列和色阶的功能
import plotly.express as px
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import dash
from jupyter_dash import JupyterDash
import pandas_datareader.data as web
import datetime as dt


data = (
    web.DataReader(
        "sp500", "fred", start="2021-01-01", end=dt.datetime.now().strftime("%d-%b-%Y")
    )
    .rename(columns="sp500": ".SPX")
    .join(
        web.DataReader(
            ["AAPL", "AMZN", "TSLA"], "yahoo", start="2021-01-01", end="2021-08-29"
        )["Open"].pipe(lambda d: d.rename(columns=c: f"c.O" for c in d.columns)),
        how="inner",
    )
).assign(size=lambda d: d.mean(axis=1))


# Build App
app = JupyterDash(__name__)
app.layout = html.Div(
    [
        html.H1("Index Scatterplot"),
        dcc.Graph(id="graph"),
        html.Label(
            [
                "constituent",
                dcc.Dropdown(
                    id="constituent-dropdown",
                    clearable=False,
                    value="AAPL.O",
                    options=[
                        "label": c, "value": c for c in data.columns if ".O" in c
                    ],
                ),
            ]
        ),
        html.Label(
            [
                "colorscale",
                dcc.Dropdown(
                    id="colorscale-dropdown",
                    clearable=False,
                    value="plasma",
                    options=[
                        "label": c, "value": c for c in px.colors.named_colorscales()
                    ],
                ),
            ]
        ),
    ]
)
# Define callback to update graph


@app.callback(Output("graph", "figure"), Input("constituent-dropdown", "value"), Input("colorscale-dropdown","value"))
def update_figure(constituent, colorscale):
    return px.scatter(
        data,
        x=".SPX",
        y=constituent,
        color="size",
        color_continuous_scale=colorscale,
        render_mode="webgl",
        title="Return Distribution",
    )  # Run app and display result inline in the notebook


app.run_server(mode="inline")

【讨论】:

以上是关于使用破折号绘制带有下拉菜单的 y 轴的主要内容,如果未能解决你的问题,请参考以下文章

Plotly dash dropdown boarder 没有按预期出现

另一个破折号/情节困境

闪亮的反应式下拉菜单行为不端(带有数字输入)

添加下拉菜单以绘制树状图

Plotly express - 使用下拉菜单绘制直方图不同列的代码

如何制作带有圆角边框的选择下拉菜单?