输入变量值后，使用 Dash（来自 Plotly）在仪表板上输出值
Posted
技术标签:
【中文标题】输入变量值后，使用 Dash（来自 Plotly）在仪表板上输出值【英文标题】：Output value on dashboard using Dash (from Plotly) after entering values for variables 【发布时间】：2020-12-05 02:32:50 【问题描述】：我正在创建一个仪表板，其中包含一系列变量，具体来说是 12 个变量，并且我正在尝试运行一个机器学习预测模型来预测房地产价格。在此示例中，我仅使用一些变量来输出基于线性回归模型的预测。到目前为止一切顺利，输入变量看起来不错，样式表正在工作......但是，python函数生成的输出只是将它打印在“生成预测”按钮正下方的屏幕上。我添加了一些额外的代码来查看是否可以在没有运气的情况下将此值打印在 dbc.Input() 组件中，现在没有任何内容输出到仪表板中。我希望能够控制此输出的样式和位置，但我不知道如何。我将在下面包含我的代码：
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
app = dash.Dash(
external_stylesheets=[dbc.themes.CYBORG]) #Use also SPACELAB / CYBORG
server = app.server
app.layout = html.Div([
dbc.Row(dbc.Col(html.Br(),
),
),
dbc.Row(dbc.Col(html.H2('Price Predictor Tool'),
width='size': 12, 'offset':1,
),
),
dbc.Row(dbc.Col(html.Br(),
),
),
dbc.Row([
dbc.Col(html.P('Bedrooms'),
width='size': 1, 'offset':1,
),
dbc.Col(html.P('Bathrooms'),
width='size': 1, 'offset':0,
),
dbc.Col(html.P('Half Baths'),
width='size': 1, 'offset':0,
),
dbc.Col(html.P('Garage Spots'),
width='size': 1, 'offset':0,
),
dbc.Col(html.P('Year Built'),
width='size': 1, 'offset':0,
),
dbc.Col(html.P('Type of Floors'),
width='size': 2, 'offset':0,
),
dbc.Col(html.P('Waterfront Description'),
width='size': 2, 'offset':0,
),
], no_gutters=False
),
dbc.Row([
dbc.Col(dcc.Dropdown(
id='input-bed',
placeholder='Number',
options=[
'label': '1', 'value': 1,
'label': '2', 'value': 2,
'label': '3', 'value': 3,
'label': '4', 'value': 4,
'label': '5', 'value': 5,
'label': '6', 'value': 6,
'label': '7', 'value': 7,
'label': '8', 'value': 8,
'label': '9', 'value': 9,
'label': '10', 'value': 10,
'label': '11', 'value': 11,
'label': '12', 'value': 12,
'label': '12+', 'value': 13]),
width='size':1,'offset':1
),
dbc.Col(dcc.Dropdown(
id='input-bath',
placeholder='Number',
options=[
'label': '1', 'value': 1,
'label': '2', 'value': 2,
'label': '3', 'value': 3,
'label': '4', 'value': 4,
'label': '5', 'value': 5,
'label': '6', 'value': 6,
'label': '7', 'value': 7,
'label': '8', 'value': 8,
'label': '9', 'value': 9,
'label': '10', 'value': 10,
'label': '11', 'value': 11,
'label': '12', 'value': 12,
'label': '12+', 'value': 13]),
width='size':1,'offset':0
),
dbc.Col(dcc.Dropdown(
id='input-hbath',
placeholder='Number',
options=[
'label': 'None', 'value': 0,
'label': '1 or more', 'value': 1]),
width='size':1,'offset':0
),
dbc.Col(dcc.Dropdown(
id='input-garage',
placeholder='Number',
options=[
'label': 'None', 'value': 0,
'label': '1', 'value': 1,
'label': '2 or more', 'value': 2]),
width='size':1,'offset':0
),
dbc.Col(dcc.Dropdown(
id='input-built_year',
placeholder='Year',
options=[
'label': '2021', 'value': 2021,
'label': '2020', 'value': 2020,
'label': '2019', 'value': 2019,
'label': '2018', 'value': 2018,
'label': '2017', 'value': 2017,
'label': '2016', 'value': 2016,
'label': '2015', 'value': 2015,
'label': '2014', 'value': 2014,
'label': '2013', 'value': 2013,
'label': '2012', 'value': 2012,
'label': '2011', 'value': 2011,
'label': '2010', 'value': 2010,
'label': '2009', 'value': 2009,
'label': '2008', 'value': 2008,
'label': '2007', 'value': 2007,
'label': '2006', 'value': 2006,
'label': '2005', 'value': 2005,
'label': '2004', 'value': 2004,
'label': '2003', 'value': 2003,
'label': '2002', 'value': 2002,
'label': '2001', 'value': 2001,
'label': '2000', 'value': 2000,
'label': '1999', 'value': 1999,
'label': '1998', 'value': 1998,
'label': '1997', 'value': 1997,
'label': '1996', 'value': 1996,
'label': '1995', 'value': 1995,
'label': '1994', 'value': 1994,
'label': '1993', 'value': 1993,
'label': '1992', 'value': 1992,
'label': '1991', 'value': 1991,
'label': '1990', 'value': 1990,
'label': '1989', 'value': 1989,
'label': '1988', 'value': 1988,
'label': '1987', 'value': 1987,
'label': '1986', 'value': 1986,
'label': '1985', 'value': 1985,
'label': '1984', 'value': 1984,
'label': '1983', 'value': 1983,
'label': '1982', 'value': 1982,
'label': '1981', 'value': 1981,
'label': '1980', 'value': 1980,
'label': '1979', 'value': 1979,
'label': '1978', 'value': 1978,
'label': '1977', 'value': 1977,
'label': '1976', 'value': 1976,
'label': '1975', 'value': 1975,
'label': '1974', 'value': 1974,
'label': '1973', 'value': 1973,
'label': '1972', 'value': 1972,
'label': '1971', 'value': 1971,
'label': '1970', 'value': 1970,
'label': '1969', 'value': 1969,
'label': '1968', 'value': 1968,
'label': '1967', 'value': 1967,
'label': '1966', 'value': 1966,
'label': '1965', 'value': 1965,
'label': '1964', 'value': 1964,
'label': '1963', 'value': 1963,
'label': '1962', 'value': 1962,
'label': '1961', 'value': 1961,
'label': '1960', 'value': 1960,
'label': '1959', 'value': 1959,
'label': '1958', 'value': 1958,
'label': '1957', 'value': 1957,
'label': '1956', 'value': 1956,
'label': '1955', 'value': 1955,
'label': '1954', 'value': 1954,
'label': '1953', 'value': 1953,
'label': '1952', 'value': 1952,
'label': '1951', 'value': 1951,
'label': '1950', 'value': 1950,
'label': '1949', 'value': 1949,
'label': '1948', 'value': 1948,
'label': '1947', 'value': 1947,
'label': '1946', 'value': 1946,
'label': '1945', 'value': 1945,
'label': '1944', 'value': 1944,
'label': '1943', 'value': 1943,
'label': '1942', 'value': 1942,
'label': '1941', 'value': 1941,
'label': '1940', 'value': 1940,
'label': '1939', 'value': 1939,
'label': '1938', 'value': 1938,
'label': '1937', 'value': 1937,
'label': '1936', 'value': 1936,
'label': '1935', 'value': 1935,
'label': '1934', 'value': 1934,
'label': '1933', 'value': 1933,
'label': '1932', 'value': 1932,
'label': '1931', 'value': 1931,
'label': '1930', 'value': 1930,
'label': '1929', 'value': 1929,
'label': '1928', 'value': 1928,
'label': '1927', 'value': 1927,
'label': '1926', 'value': 1926,
'label': '1925', 'value': 1925,
'label': '1924', 'value': 1924,
'label': '1923', 'value': 1923,
'label': '1922', 'value': 1922,
'label': '1921', 'value': 1921,
'label': '1920', 'value': 1920,
'label': '1919', 'value': 1919,
'label': '1918', 'value': 1918,
'label': '1917', 'value': 1917,
'label': '1916', 'value': 1916,
'label': '1915', 'value': 1915,
'label': '1914', 'value': 1914,
'label': '1913', 'value': 1913,
'label': '1912', 'value': 1912,
'label': '1911', 'value': 1911,
'label': '1910', 'value': 1910,
'label': '1909', 'value': 1909,
'label': '1908', 'value': 1908,
'label': '1907', 'value': 1907,
'label': '1906', 'value': 1906,
'label': '1905', 'value': 1905,
'label': '1904', 'value': 1904,
'label': '1903', 'value': 1903,
'label': '1902', 'value': 1902,
'label': '1901', 'value': 1901,
'label': '1900', 'value': 1900]),
width='size':1,'offset':0
),
dbc.Col(dcc.Dropdown(
id='input-floor',
placeholder='Select all that apply',
options=[
'label': 'Marble', 'value': 'Marble',
'label': 'Vinyl', 'value': 'Vinyl',
'label': 'Ceramic', 'value': 'Ceramic',
'label': 'Carpeted', 'value': 'Carpeted',
'label': 'Tile', 'value': 'Tile',
'label': 'Other', 'value': 'Other'],
value=[],
multi=True),
width='size':2,'offset':0
),
dbc.Col(dcc.Dropdown(
id='input-waterfront',
placeholder='Select all that apply',
options=[
'label': 'Ocean Front', 'value': 'Ocean Front',
'label': 'Intracoastal Front', 'value': 'Intracoastal Front',
'label': 'No Fixed Bridges', 'value': 'No Fixed Bridges',
'label': 'Bay Front', 'value': 'Bay Front',
'label': 'Fixed Bridges(s)', 'value': 'Fixed Bridges(s)',
'label': 'Canal Front ', 'value': 'Canal Front '],
value=[],
multi=True),
width='size':2,'offset':0,
),
], no_gutters=False
),
html.Br(),
html.Br(),
dbc.Row([
dbc.Col(html.P('Living Area (Sq Ft)'),
width='size': 2, 'offset':1,
),
dbc.Col(html.P('Lot Area (Sq Ft)'),
width='size': 2, 'offset':0,
),
dbc.Col(html.P('Zip Code'),
width='size': 1, 'offset':0,
),
dbc.Col(html.P('Listing Starting Date'),
width='size': 2, 'offset':0,
),
dbc.Col(html.P('Projected Days on the Market'),
width='size': 2, 'offset':0,
),
], no_gutters=False
),
dbc.Row([
dbc.Col(
dbc.Input(id='input-living_area', type='number',
placeholder='From 400 to 15000',
min=400, max=15000, step=1, className='mb-3'),
width='size':2, 'offset':1,
),
dbc.Col(
dbc.Input(id='input-lot_area', type='number',
placeholder='From 400+',
min=400, max=15000, step=1, className='mb-3'),
width='size':2, 'offset':0,
),
dbc.Col(dcc.Dropdown(
id='input-zip_code',
placeholder='33131',
options=[
'label': '33498', 'value': 33498,
'label': '33496', 'value': 33496,
'label': '33493', 'value': 33493,
'label': '33487', 'value': 33487,
'label': '33486', 'value': 33486,
'label': '33484', 'value': 33484,
'label': '33483', 'value': 33483,
'label': '33480', 'value': 33480,
'label': '33478', 'value': 33478,
'label': '33477', 'value': 33477,
'label': '33476', 'value': 33476,
'label': '33473', 'value': 33473,
'label': '33472', 'value': 33472,
'label': '33470', 'value': 33470,
'label': '33469', 'value': 33469,
'label': '33467', 'value': 33467,
'label': '33463', 'value': 33463,
'label': '33462', 'value': 33462,
'label': '33461', 'value': 33461,
'label': '33460', 'value': 33460,
'label': '33458', 'value': 33458,
'label': '33449', 'value': 33449,
'label': '33446', 'value': 33446,
'label': '33445', 'value': 33445,
'label': '33444', 'value': 33444,
'label': '33442', 'value': 33442,
'label': '33441', 'value': 33441,
'label': '33438', 'value': 33438,
'label': '33437', 'value': 33437,
'label': '33436', 'value': 33436,
'label': '33435', 'value': 33435,
'label': '33434', 'value': 33434,
'label': '33433', 'value': 33433,
'label': '33432', 'value': 33432,
'label': '33431', 'value': 33431,
'label': '33430', 'value': 33430,
'label': '33428', 'value': 33428,
'label': '33426', 'value': 33426,
'label': '33418', 'value': 33418,
'label': '33417', 'value': 33417,
'label': '33415', 'value': 33415,
'label': '33414', 'value': 33414,
'label': '33413', 'value': 33413,
'label': '33412', 'value': 33412,
'label': '33411', 'value': 33411,
'label': '33410', 'value': 33410,
'label': '33409', 'value': 33409,
'label': '33408', 'value': 33408,
'label': '33407', 'value': 33407,
'label': '33406', 'value': 33406,
'label': '33405', 'value': 33405,
'label': '33404', 'value': 33404,
'label': '33403', 'value': 33403,
'label': '33401', 'value': 33401,
'label': '33351', 'value': 33351,
'label': '33334', 'value': 33334,
'label': '33332', 'value': 33332,
'label': '33331', 'value': 33331,
'label': '33330', 'value': 33330,
'label': '33328', 'value': 33328,
'label': '33327', 'value': 33327,
'label': '33326', 'value': 33326,
'label': '33325', 'value': 33325,
'label': '33324', 'value': 33324,
'label': '33323', 'value': 33323,
'label': '33322', 'value': 33322,
'label': '33321', 'value': 33321,
'label': '33319', 'value': 33319,
'label': '33317', 'value': 33317,
'label': '33316', 'value': 33316,
'label': '33315', 'value': 33315,
'label': '33314', 'value': 33314,
'label': '33313', 'value': 33313,
'label': '33312', 'value': 33312,
'label': '33311', 'value': 33311,
'label': '33309', 'value': 33309,
'label': '33308', 'value': 33308,
'label': '33306', 'value': 33306,
'label': '33305', 'value': 33305,
'label': '33304', 'value': 33304,
'label': '33301', 'value': 33301,
'label': '33196', 'value': 33196,
'label': '33194', 'value': 33194,
'label': '33193', 'value': 33193,
'label': '33190', 'value': 33190,
'label': '33189', 'value': 33189,
'label': '33187', 'value': 33187,
'label': '33186', 'value': 33186,
'label': '33185', 'value': 33185,
'label': '33184', 'value': 33184,
'label': '33183', 'value': 33183,
'label': '33182', 'value': 33182,
'label': '33181', 'value': 33181,
'label': '33180', 'value': 33180,
'label': '33179', 'value': 33179,
'label': '33178', 'value': 33178,
'label': '33177', 'value': 33177,
'label': '33176', 'value': 33176,
'label': '33175', 'value': 33175,
'label': '33174', 'value': 33174,
'label': '33173', 'value': 33173,
'label': '33172', 'value': 33172,
'label': '33170', 'value': 33170,
'label': '33169', 'value': 33169,
'label': '33168', 'value': 33168,
'label': '33167', 'value': 33167,
'label': '33166', 'value': 33166,
'label': '33165', 'value': 33165,
'label': '33162', 'value': 33162,
'label': '33161', 'value': 33161,
'label': '33160', 'value': 33160,
'label': '33158', 'value': 33158,
'label': '33157', 'value': 33157,
'label': '33156', 'value': 33156,
'label': '33155', 'value': 33155,
'label': '33154', 'value': 33154,
'label': '33150', 'value': 33150,
'label': '33149', 'value': 33149,
'label': '33147', 'value': 33147,
'label': '33146', 'value': 33146,
'label': '33145', 'value': 33145,
'label': '33144', 'value': 33144,
'label': '33143', 'value': 33143,
'label': '33142', 'value': 33142,
'label': '33141', 'value': 33141,
'label': '33140', 'value': 33140,
'label': '33139', 'value': 33139,
'label': '33138', 'value': 33138,
'label': '33137', 'value': 33137,
'label': '33136', 'value': 33136,
'label': '33135', 'value': 33135,
'label': '33134', 'value': 33134,
'label': '33133', 'value': 33133,
'label': '33132', 'value': 33132,
'label': '33131', 'value': 33131,
'label': '33130', 'value': 33130,
'label': '33129', 'value': 33129,
'label': '33128', 'value': 33128,
'label': '33127', 'value': 33127,
'label': '33126', 'value': 33126,
'label': '33125', 'value': 33125,
'label': '33122', 'value': 33122,
'label': '33109', 'value': 33109,
'label': '33101', 'value': 33101,
'label': '33076', 'value': 33076,
'label': '33073', 'value': 33073,
'label': '33071', 'value': 33071,
'label': '33069', 'value': 33069,
'label': '33068', 'value': 33068,
'label': '33067', 'value': 33067,
'label': '33066', 'value': 33066,
'label': '33065', 'value': 33065,
'label': '33064', 'value': 33064,
'label': '33063', 'value': 33063,
'label': '33062', 'value': 33062,
'label': '33060', 'value': 33060,
'label': '33056', 'value': 33056,
'label': '33055', 'value': 33055,
'label': '33054', 'value': 33054,
'label': '33039', 'value': 33039,
'label': '33035', 'value': 33035,
'label': '33034', 'value': 33034,
'label': '33033', 'value': 33033,
'label': '33032', 'value': 33032,
'label': '33031', 'value': 33031,
'label': '33030', 'value': 33030,
'label': '33029', 'value': 33029,
'label': '33028', 'value': 33028,
'label': '33027', 'value': 33027,
'label': '33026', 'value': 33026,
'label': '33025', 'value': 33025,
'label': '33024', 'value': 33024,
'label': '33023', 'value': 33023,
'label': '33021', 'value': 33021,
'label': '33020', 'value': 33020,
'label': '33019', 'value': 33019,
'label': '33018', 'value': 33018,
'label': '33016', 'value': 33016,
'label': '33015', 'value': 33015,
'label': '33014', 'value': 33014,
'label': '33013', 'value': 33013,
'label': '33012', 'value': 33012,
'label': '33010', 'value': 33010,
'label': '33009', 'value': 33009,
'label': '33004', 'value': 33004]),
width='size':1,'offset':0
),
dbc.Col(dcc.Dropdown(
id='input-selling_month',
placeholder='Select Month',
options=[
'label': 'January', 'value': 1,
'label': 'February', 'value': 2,
'label': 'March', 'value': 3,
'label': 'April', 'value': 4,
'label': 'May', 'value': 5,
'label': 'June', 'value': 6,
'label': 'July', 'value': 7,
'label': 'August', 'value': 8,
'label': 'September', 'value': 9,
'label': 'October', 'value': 10,
'label': 'November', 'value': 11,
'label': 'December', 'value': 12]),
width='size':2,'offset':0
),
dbc.Col(dcc.Dropdown(
id='input-dom',
placeholder='Select between 30, 60 and 90',
options=[
'label': '30', 'value': 30,
'label': '60', 'value': 60,
'label': '90', 'value': 90]),
width='size':2,'offset':0
),
], no_gutters=False
),
html.Br(),
html.Br(),
dbc.Row([
dbc.Col(
[
dbc.Button('Generate Prediction', id='input-predi_button', n_clicks=0, color='primary', className="mr-2"),
html.Span(id="input-prediction", style="vertical-align": "middle"),
],
width='size':6,'offset':1
),
], no_gutters=True
),
html.Br(),
html.Br(),
html.Div(dbc.FormGroup(dbc.FormGroup(
[
dbc.Label("Property's Price Prediction", html_for="text-prediction", width='size':2,'offset':1),
dbc.Col(
dbc.Input(
id='result', placeholder=""
),
width='size':1,'offset':0,
),
], row=True,
)))
])
@app.callback(
Output('result', 'children'),
[Input('input-predi_button', 'n_clicks')],
[State('input-bed', 'value'),
State('input-bath', 'value'),
State('input-hbath', 'value'),
State('input-garage', 'value'),
State('input-built_year', 'value'),
State('input-floor', 'value'),
State('input-waterfront', 'value'),
State('input-living_area', 'value'),
State('input-lot_area', 'value'),
State('input-zip_code', 'value'),
State('input-selling_month', 'value'),
State('input-dom', 'value')]
)
def update_result(n_clicks,bed, bath, hbath, garage, built_year, floor,
waterfront, living_area, lot_area, zip_code, selling_month, dom):
if int(n_clicks) > 0:
prediction =(-39422.64)+(bed*(-261049.88))+(bath*227856.66)+\
(hbath*15413.56)+(garage*17875.03)+(dom*274.12)+\
(living_area*693.40)+(built_year*350.07)+(zip_code*(-34.75))
return prediction
if __name__ == '__main__':
app.run_server()
【问题讨论】：
如果提供的建议解决了您的问题，请将其标记为已接受的答案。我看到您现在已经提出了 12 个问题，并收到了许多有用的答案。然而你还没有接受一个单一的答案。如果你能在这里写一个问题，我相信你也能找到如何接受答案。 【参考方案1】：您的回调将其输出设置为dbc.Input 组件，该组件没有children 属性。您需要将其更改为 Output('result', 'value') 或使用其他组件来显示您的输出。
或者，您可以将 dbc.Input(id='result', placeholder="") 更改为 html.Div(id='result')，然后您可以保持回调函数不变。
【讨论】：
以上是关于输入变量值后，使用 Dash（来自 Plotly）在仪表板上输出值的主要内容，如果未能解决你的问题，请参考以下文章
Plotly：如何使用plotly-dash在一页上创建“输入文本”并在第二页或选项卡上输出（图形）？