python - 在 plotly dash 上创建条形图的问题
问题描述
代码:
app.layout=html.Div([
html.Div('WORLD HAPPINESS REPORT',
style={
'textAlign':'center',
'color':'#F197C0',
'fontWeight':'bold',
'fontSize':'50px',
'fontFamily':'Sans-serif',
'border':({"width":"2px", "color":"black"})
}),
html.P('''The World Happiness Report is an annual report on the state of global happiness
and is currently participated by 155 countries. ''',
style={
'textAlign':'justify-text',
'color':'#B49FDC',
'fontWeight':'bold',
'fontSize':'15px',
'fontFamily':'Sans-serif'
}),
#for dropdown
html.Br(),
dcc.Dropdown(id='select_year',
options=[
{'label':'2015','value':2015},
{'label':'2016','value':2016},
{'label':'2017','value':2017},
{'label':'2018','value':2018},
{'label':'2019','value':2019},
{'label':'2020','value':2020},
],
multi=False,
value='2015',
style={'width': "40%"}
),
dcc.Graph(id='the_graph',figure={})
])
@app.callback(
Output(component_id='the_graph', component_property='figure'),
[Input(component_id='select_year', component_property='value')] #this is for the argument of the func.written below.
)
def update_graph(option_selected):
#print(option_slctd)
#print(type(option_slctd))
#container = "The year chosen by user was: {}".format(option_slctd)
#if option_selected==2015:
d1=data[data['Year']==option_selected]
fig=go.Bar(
x=df1['Country'],
y=df1['Happiness Score']
)
return fig
我必须使用 plotly dash 制作条形图。但我没有得到所需的输出。我无法理解为什么结果会这样。我得到的输出是:
谁能告诉我代码有什么问题?
解决方案
我认为你没有得到图表的原因是因为你失踪了go.Figure()
。由于我没有您使用的相同数据,因此我使用了官方网站上使用的数据并修改了下拉值以匹配数据。我验证的环境是JupyterLab,所以有一些代码,请忽略。
import dash
import dash_core_components as dcc
import dash_html_components as html
#from jupyter_dash import JupyterDash
from dash.dependencies import Input, Output, State
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
data = px.data.gapminder()
#app = JupyterDash(__name__)
app = dash.Dash(__name__)
app.layout = html.Div([html.Div('WORLD HAPPINESS REPORT',
style={'textAlign':'center',
'color':'#F197C0',
'fontWeight':'bold',
'fontSize':'50px',
'fontFamily':'Sans-serif',
'border':({"width":"2px", "color":"black"})
}),
html.P('''The World Happiness Report is an annual report on the state of global happiness
and is currently participated by 155 countries. ''',
style={'textAlign':'justify-text',
'color':'#B49FDC','fontWeight':'bold',
'fontSize':'15px',
'fontFamily':'Sans-serif'}),#for dropdown
html.Br(),
dcc.Dropdown(id='select_year',
options=[
{'label':'1982','value':1982},
{'label':'1987','value':1987},
{'label':'1992','value':1992},
{'label':'1997','value':1997},
{'label':'2002','value':2002},
{'label':'2007','value':2007},],
multi=False,
value='2015',
style={'width': "40%"}),
dcc.Graph(id='the_graph',figure={})
])
@app.callback(
Output(component_id='the_graph', component_property='figure'),
[Input(component_id='select_year', component_property='value')] #this is for the argument of the func.written below.
)
def update_graph(option_selected):
df1=data[data['year'] == option_selected]
fig=go.Figure(data=[go.Bar(x=df1['country'], y=df1['lifeExp'])])
return fig
if __name__ == "__main__":
app.run_server()
#app.run_server(mode='inline')
推荐阅读
- android - 您想将您的新应用程序与 cordova 集成以针对本机 ios 和 android 需要时间而没有响应
- angular - 角度:*ngFor trackby 日期
- javascript - ASP.NET Core 2 通过 AJAX 发布 JSON
- java - Java 9 未编译
- android - 从 firebase 检索数据需要一些时间才能加载到 recyclerview
- php - 根据 Woocommerce 父产品类别更改添加到购物车按钮文本
- jquery - .Net Core 2.0 Web API 无法在 Azure 中发布,因为 CORS 在响应标头中有多个 Access-Control-Allow-Origin
- java - NonGUIDriver java.lang.RuntimeException 中的错误:找不到 TestPlan 类!在 ubunto 上
- java - 包含字母、数字和下划线的用户名的正则表达式
- python - 如何将我的项目路径永久添加到 sys.path?