[英]Issue in creating bar graph on plotly dash
CODE:代码:
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
I have to make a bar graph using plotly dash.我必须使用 plotly dash 制作条形图。 But i am not getting the required output.I am not able to understand as to why the outcome is coming like that.
但我没有得到所需的 output。我不明白为什么结果会这样。 The output that im getting is:
我得到的 output 是:
Can anyone please let me know what the issue is with the code?谁能告诉我代码有什么问题?
I think the reason you didn't get a graph is because you were missing go.Figure()
.我认为您没有得到图表的原因是因为您缺少
go.Figure()
。 Since I don't have the same data you are using, I used the data used on the official website and modified the dropdown values to match the data.由于我没有您使用的相同数据,因此我使用了官方网站上使用的数据并修改了下拉值以匹配数据。 The environment I verified is JupyterLab, so there is some code about it, but please ignore it.
我验证的环境是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')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.