plotly 图表上动态变化的 X 和 Y 标题
[英]Dynamic & changing X and Y titles on plotly graph
问题描述
我正在尝试使用 OLS 趋势线制作 plotly 散点图 plot，并提供一个下拉菜单，让用户从不同的 X 和 Y 中进行选择。 plot 几乎可以正常工作。 下面的代码更新数据但不更新 X 和 Y 轴标题或数据标签。 因此，当您在给定点上使用 hover 时，它始终将 X 变量显示为 CRTTOTAL，将 Y 变量显示为 AVG_MISPERCEPTION。
代码：
import plotly.graph_objects as go
import plotly.express as px
#making a figure
fig = go.Figure()
x1 = df['crttotal']
x2 = df['nfcc_mean']
x3 = df['bficonmean']
x4 = df['bfiopmean']
y1 = df['avg_misperception_score']
y2 = df['avg_ambiguous_score']
# make figure
fig = px.scatter(df, x=x1, y=y1, trendline="ols", trendline_scope="overall", labels = {"crttotal":"crttotal", "avg_misperception_score":"avg_misperception_score"})
#making the dropdown
fig.update_layout(
updatemenus=[
go.layout.Updatemenu(
type="dropdown",
buttons=list([
dict(label="CRT vs Misperception",
method="update",
args=[{"x": [x1, px.scatter(x=x1, y=y1, trendline='ols').data[1].x],
"y": [y1, px.scatter(x=x1, y=y1, trendline='ols').data[1].y],
"trendline":["ols"],
"trendline_scope":["overall"]},
{"title": "CRT vs Misperception"}]),
dict(label="NFCC vs Misperception",
method="update",
args=[{"x": [x2, px.scatter(x=x2, y=y1, trendline='ols').data[1].x],
"y": [y1, px.scatter(x=x2, y=y1, trendline='ols').data[1].y],
"trendline":["ols"],
"trendline_scope":["overall"]},
{"title": "NFCC vs Misperception"}]),
dict(label="bficonmean vs Misperception",
method="update",
args=[{"x": [x3, px.scatter(x=x3, y=y1, trendline='ols').data[1].x],
"y": [y1, px.scatter(x=x3, y=y1, trendline='ols').data[1].y],
"trendline":["ols"], "trendline_scope":["overall"]},
{"title": "bficonmean vs Misperception"}]),
dict(label="bfiopmean vs Misperception",
method="update",
args=[{"x": [x4, px.scatter(x=x4, y=y1, trendline='ols').data[1].x],
"y": [y1, px.scatter(x=x4, y=y1, trendline='ols').data[1].y],
"trendline":["ols"],
"trendline_scope":["overall"]},
{"title": "bfiopmean vs Misperception"}]),
### changing the y variable also
dict(label="CRT vs Ambiguity",
method="update",
args=[{"x": [x1, px.scatter(x=x1, y=y2, trendline='ols').data[1].x],
"y": [y2, px.scatter(x=x1, y=y2, trendline='ols').data[1].y],
"trendline":["ols"],
"trendline_scope":["overall"]},
{"title": "CRT vs Ambiguity"}]),
dict(label="NFCC vs Ambiguity",
method="update",
args=[{"x": [x2, px.scatter(x=x2, y=y2, trendline='ols').data[1].x],
"y": [y2, px.scatter(x=x2, y=y2, trendline='ols').data[1].y],
"trendline":["ols"],
"trendline_scope":["overall"]},
{"title": "NFCC vs Ambiguity"}]),
dict(label="bficonmean vs Ambiguity",
method="update",
args=[{"x": [x3, px.scatter(x=x3, y=y2, trendline='ols').data[1].x],
"y": [y2, px.scatter(x=x3, y=y2, trendline='ols').data[1].y],
"trendline":["ols"],
"trendline_scope":["overall"]},
{"title": "bficonmean vs Ambiguity"}]),
dict(label="bfiopmean vs Ambiguity",
method="update",
args=[{"x": [x4, px.scatter(x=x4, y=y2, trendline='ols').data[1].x],
"y": [y2, px.scatter(x=x4, y=y2, trendline='ols').data[1].y],
"trendline":["ols"],
"trendline_scope":["overall"]},
{"title": "bfiopmean vs Ambiguity"}])
])
)
]
)
#set the title
fig.update_layout(title="Dropdown")
fig.show()
数据
crttotal nfcc_mean bficonmean bfiopmean avg_misperception_score \
0 3 2.87 3.875 3.000 -0.062
1 0 3.53 3.625 3.125 -0.235
2 0 3.80 4.000 3.000 0.077
3 0 3.73 3.750 3.500 0.067
4 2 3.87 3.125 3.000 0.368
5 0 3.47 2.750 3.500 -0.200
6 0 4.33 3.625 3.625 -0.200
7 0 4.13 3.250 3.125 -0.500
8 0 4.73 3.250 3.250 -0.643
9 3 5.20 3.750 2.750 0.000
avg_ambiguous_score
0 2.60
1 2.10
2 3.35
3 2.55
4 2.90
5 2.80
6 2.85
7 3.30
8 3.15
9 2.70
**我试过的**将 arguments 添加到按钮，以便更新 px.scatter 函数：
fig.update_layout(
updatemenus=[
go.layout.Updatemenu(
type="dropdown",
buttons=list([
dict(label="CRT vs Misperception", # button label
method="update",
args=[{"x": [x1, px.scatter(x=x1, y=y1, trendline='ols').data[1].x],
"y": [y1, px.scatter(x=x1, y=y1, trendline='ols').data[1].y],
"trendline":["ols"],
"trendline_scope":["overall"],
** "labels":{"crttotal":"CRT",
** "avg_misperception_score":"Misperception"}},
{"title": "CRT vs Misperception"}]),
dict(label="NFCC vs Misperception",
method="update",
args=[{"x": [x2, px.scatter(x=x2, y=y1, trendline='ols').data[1].x],
"y": [y1, px.scatter(x=x2, y=y1, trendline='ols').data[1].y],
"trendline":["ols"],
"trendline_scope":["overall"],
},
{"title": "NFCC vs Misperception",
... ETC.
2 个解决方案
解决方案1
0 2023-01-31 02:49:04
如果你使用破折号，你可以参考下面的代码：
from dash import html
import dash_bootstrap_components as dbc
from dash import dcc
from dash import html,callback
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
import dash
df = pd.read_csv('Data_test.csv')
x1 = df['crttotal']
x2 = df['nfcc_mean']
x3 = df['bficonmean']
x4 = df['bfiopmean']
y1 = df['avg_misperception_score']
y2 = df['avg_ambiguous_score']
app = dash.Dash(__name__)
app.layout = html.Div([
dbc.Row([
dbc.Col([
html.H5('Dropdown',className='text-center'),
dcc.Dropdown(id='selection',placeholder="Please select dropdown",
options=[{'label':'CRT vs Misperception','value':'CRT vs Misperception'},
{'label':'NFCC vs Misperception','value':'NFCC vs Misperception'},
{'label':'bficonmean vs Misperception','value':'bficonmean vs Misperception'},
{'label':'bfiopmean vs Misperception','value':'bfiopmean vs Misperception'},
{'label':'CRT vs Ambiguity','value':'CRT vs Ambiguity'},
{'label':'NFCC vs Ambiguity','value':'NFCC vs Ambiguity'},
{'label':'bficonmean vs Ambiguity','value':'bficonmean vs Ambiguity'},
{'label':'bfiopmean vs Ambiguity','value':'bfiopmean vs Ambiguity'}],
value='CRT vs Misperception',
multi=False,
disabled=False,
clearable=False,
searchable=True),
],width={'size':12,"offset":0,'order':1}),
], className='p-2 align-items-stretch'),
dbc.Row([
dbc.Col([
dcc.Graph(id="graph",figure={},style={'height':450})
],width={'size':12,'offset':0,'order':2}),
], className='p-2 align-items-stretch'),
])
@app.callback(Output('graph','figure'),
[Input('selection', 'value')])
def data_picker(selection):
if selection == 'CRT vs Misperception':
fig = fig = px.scatter(df, x=x1, y=y1, trendline="ols", trendline_scope="overall")
elif selection == 'NFCC vs Misperception':
fig = fig = px.scatter(df, x=x2, y=y1, trendline="ols", trendline_scope="overall")
elif selection == 'bficonmean vs Misperception':
fig = fig = px.scatter(df, x=x3, y=y1, trendline="ols", trendline_scope="overall")
elif selection == 'bfiopmean vs Misperception':
fig = fig = px.scatter(df, x=x4, y=y1, trendline="ols", trendline_scope="overall")
elif selection == 'CRT vs Ambiguity':
fig = fig = px.scatter(df, x=x1, y=y2, trendline="ols", trendline_scope="overall")
elif selection == 'NFCC vs Ambiguity':
fig = fig = px.scatter(df, x=x2, y=y2, trendline="ols", trendline_scope="overall")
elif selection == 'bficonmean vs Ambiguity':
fig = fig = px.scatter(df, x=x3, y=y2, trendline="ols", trendline_scope="overall")
elif selection == 'bfiopmean vs Ambiguity':
fig = fig = px.scatter(df, x=x4, y=y2, trendline="ols", trendline_scope="overall")
return fig
if __name__ == '__main__':
app.run(debug=False)
我不确定图表上的下拉按钮是否可以更改轴的标题，但回调可以。
解决方案2
0 2023-02-03 22:24:06
我将此视为How to add a OLS trendline to a plotly scatter plot graph object that uses updatemenus to display subsets of data? 的后续问题？ . 如果你要完成所有细节，你的目标是在那里实现的结果几乎是不可能的 - 例如每个子图的正确 hovertemplate。 不过，获得动态并更改 X 和 Y 标题将是非常可行的。 但是我的以下建议，无论您使用的是 JupyterDash 还是 Dash，都可以通过下面的代码中的设置轻松得多。 没有updatemenus复杂args或类似内容的更新菜单，只是简单地：
fig = px.scatter(df, x=x, y=y, trendline="ols",
trendline_scope="overall")
...其中x和y的值是通过下拉列表使用dcc.Dropdown在回调function 中确定的，如下所示：
@ app.callback(Output('fig1', 'figure'),
[Input('y_val', 'value'),
Input('x_val', 'value')])
def trends(y, x):
fig = px.scatter(df, x=x, y=y, trendline="ols",
trendline_scope="overall")
fig.update_layout(paper_bgcolor='rgba(0,0,0,0)',
plot_bgcolor='rgba(0,0,0,0)')
return fig
查看下面的完整代码片段，您会发现还有很多其他事情在进行，比如定义Dash应用程序的结构和布局，但是如果您花时间阅读一点但更多关于 Dash 的内容，您你会很快发现这是通往 go 的路。不仅是这个例子，还有所有其他你应该遇到的分析或数据科学挑战。 这是代表 Plotly 团队的大胆声明，但我会坚持！
无论如何，这是生成的应用程序的 gif：
这是 JupyterLab 版本的完整代码。 如果您决定使用纯Dash go，只需进行Plotly 中描述的一些编辑：如何重写标准的 dash 应用程序以在 JupyterLab 中启动它？
from jupyter_dash import JupyterDash
from dash import Dash, html, dcc, Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
import plotly.express as px
import numpy as np
import pandas as pd
# data
df = pd.DataFrame({'crttotal': np.random.random(8),
'nfcc_mean': np.random.random(8),
'bficonmean': np.random.random(8),
'bfiopmean': np.random.random(8),
'avg_misperception_score': np.random.random(8),
'avg_ambiguous_score': np.random.random(8)})
# app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app = JupyterDash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
y_variables = ['avg_misperception_score', 'avg_ambiguous_score']
x_variables = ['crttotal', 'nfcc_mean', 'bficonmean', 'bfiopmean']
# dd_options = options.remove(target_variable)
app.layout = dbc.Container(
[
dbc.Row(
[
dbc.Col(
[
dcc.Markdown(
"#### Plotly Express line chart with trendlines and dropdown",
className="text-white",
)
], # style={"textalign": "center"},
width=8
)
],
className="bg-secondary rounded-3 mt-2",
# style={"textalign": "center"},
justify="center"
),
dbc.Row(
[
dbc.Col([dbc.Label(
"Target variable:",
# className="bg-info bg-opacity-50 mt-2 p-2",
className="mt-2 p-2",
style={"width": "100%"},
),
dcc.Dropdown(y_variables,
y_variables[0], id='y_val'),
dbc.Label(
"Explanatory variable:",
# className="bg-info bg-opacity-50 mt-2 p-2",
className="mt-2 p-2",
style={"width": "100%"},
),
dcc.Dropdown(x_variables,
x_variables[0], id='x_val'),
], width=4),
dbc.Col(
[
dcc.Graph(id='fig1')
]
)
],
className="bg-secondary bg-opacity-25 rounded-3 p-2 mt-2",
),
]
)
@ app.callback(Output('fig1', 'figure'),
[Input('y_val', 'value'),
Input('x_val', 'value')])
def trends(y, x):
fig = px.scatter(df, x=x, y=y, trendline="ols",
trendline_scope="overall")
fig.update_layout(paper_bgcolor='rgba(0,0,0,0)',
plot_bgcolor='rgba(0,0,0,0)')
return fig
# app.run_server(mode='inline', port=8070, dev_tools_ui=True, use_reloader = False,
# dev_tools_hot_reload=False, threaded= True)
app.run_server(debug=True, use_reloader=False, mode='inline')
Plotly 图形具有相同的 X 轴和多个 Y 轴，数据数量未定义
[英]Plotly graph with same X and multiple Y axes with undefined number of data
使用 layout.updatemenus[] Dropdown 动态改变 X 轴和 Y 轴标题
[英]Dynamically Changing X-axis and Y-axis Titles Using layout.updatemenus[] Dropdown
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.