Plotly Dash 将数据嵌入 html.Details

Question

我对 Python 和 Dash 有点陌生。
由于我对数据分析很感兴趣，所以我开始摆弄 Dash。
计划是建立一个股票仪表板，但我遇到了一些问题...
我想要一个 dcc.Input 框，您可以在其中放置代码并使用 html.button 提交，稍后我想显示来自不同 html.Details 的多只股票的数据，所以我的问题是如何实现。
我不会走得太远，因为我不了解回调。尝试提供的代码时，我得到 Error:Callback error updating table.children - AttributeError: 'NoneType' object has no attribute 'upper'

将输入转换为数据表并放入 html.Details

的正确方法是什么

import yfinance as yf
import pandas as pd
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input, State

app = dash.Dash()
app.layout = html.Div([
    dcc.Input(id='input', value='', type='text', placeholder='Enter Stock ticker'),
    html.Button('Submit', id='button'),
    html.Div(id='table')
])

@app.callback(
    [Output('table', 'children')],
    [Input('button', 'n_clicks')],
    [State('input', 'value')]
)

def update_table(input_value, n_clicks):
    ticker = yf.Ticker(input_value.upper())
    history = ticker.history(period='max')
    return html.Div([
        html.Details(
            dash_table.DataTable(
                id='tickerdata',
                columns = [{'name': i, 'id': i} for i in history.columns],
                data = history,
            )
        )
    ])

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

Answer 1

错误原因是回调函数的接收顺序和更新函数的参数顺序不正确。 n_clicks 正在尝试将数字大写并发生错误。下一个错误是数据框需要更改为字典才能显示在 table 中。此外，stocks 中的数据是按日期索引的，因此日期列需要取消索引才能显示它。

import yfinance as yf
import pandas as pd
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input, State

app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id='input', value='', type='text', placeholder='Enter Stock ticker'),
    html.Button('Submit', id='submit_btn',n_clicks=0),
    html.Div(id='table')
])

@app.callback(
    Output('table', 'children'),
    [Input('submit_btn', 'n_clicks')],
    [State('input', 'value')]
)
def update_table(n_clicks, input_value):
    ticker = yf.Ticker(input_value.upper())
    history = ticker.history(period='max')
    history.reset_index(inplace=True)
    return html.Div([
        html.Details(
            dash_table.DataTable(
                id='tickerdata',
                columns = [{'name': i, 'id': i} for i in history.columns],
                data = history.to_dict('records'),
                fixed_rows={'headers':True}
            )
        )
    ])

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

Plotly Dash 将数据嵌入 html.Details

PlotlyDash embedding data into html.Details

python

plotly-dash