英文:
Empty Spaces in Dash Graph: How to Remove Them?
问题
我在Dash中使用Plotly创建了一个图表,但在图表的顶部和右侧出现了空白空间。您可以在这里看到图表:图表图片。
问题:
是否可以删除这些空白空间,使图表完全适应其容器?
图表代码:
monte_carlo_graph = dcc.Graph(
id="monte_carlo_graph",
figure=go.Figure(
data=simulations_traces,
layout=go.Layout(
showlegend=False,
title="",
yaxis=dict(
autorange=True,
title="Price",
titlefont=dict(color="white"),
tickfont=dict(color="white"),
gridcolor="grey",
),
xaxis_rangeslider_visible=False,
xaxis=dict(
autorange=True,
title="Days",
titlefont=dict(color="white"),
tickfont=dict(color="white"),
gridcolor="grey",
),
plot_bgcolor="rgba(0,0,0,0)",
paper_bgcolor="rgba(0,0,0,0)",
),
),
className="monte-carlo-graph",
)
图表的CSS样式:
.monte-carlo-graph {
height: 600px;
width: 900px;
overflow: hidden;
background-color: #211F32;
padding: 0px !important;
margin: 0px !important;
padding-top: 0px !important;
margin-top: 0px !important;
overflow: hidden;
position: relative;
}
我尝试调整CSS中的高度和宽度,但并未解决问题。如何删除图表上的这些空白空间?非常感谢您的帮助或建议。
英文:
I have created a graph in Dash using Plotly, and I'm encountering empty spaces at the top and right of the graph. You can see the graph here: Graph Image.
Question:
Is it possible to remove these blank spaces and make the graph fit perfectly within its container?
Code for graph:
monte_carlo_graph = dcc.Graph(
id="monte_carlo_graph",
figure=go.Figure(
data=simulations_traces,
layout=go.Layout(
showlegend=False,
title="",
yaxis=dict(
autorange=True,
title="Price",
titlefont=dict(color="white"),
tickfont=dict(color="white"),
gridcolor="grey",
),
xaxis_rangeslider_visible=False,
xaxis=dict(
autorange=True,
title="Days",
titlefont=dict(color="white"),
tickfont=dict(color="white"),
gridcolor="grey",
),
plot_bgcolor="rgba(0,0,0,0)",
paper_bgcolor="rgba(0,0,0,0)",
),
),
className="monte-carlo-graph",
)
Css styling for the graph:
.monte-carlo-graph {
height: 600px;
width: 900px;
overflow: hidden;
background-color: #211F32;
padding: 0px !important;
margin: 0px !important;
padding-top: 0px !important;
margin-top: 0px !important;
overflow: hidden;
position: relative;
}
I have tried adjusting the height and width in the CSS, but it didn't solve the issue. How can I remove these empty spaces from the graph? Any help or suggestions are highly appreciated.
答案1
得分: 1
我找到了解决方法,我需要将这一行添加到我的图布局中:
margin=go.layout.Margin(r=0, t=0,)
所以现在代码看起来像这样:
monte_carlo_graph = dcc.Graph(
id="monte_carlo_graph",
figure=go.Figure(
data=simulations_traces,
layout=go.Layout(
showlegend=False,
title="",
yaxis=dict(
autorange=True,
title="Price",
titlefont=dict(color="white"),
tickfont=dict(color="white"),
gridcolor="grey",
),
margin=go.layout.Margin(r=0, t=0,),
xaxis_rangeslider_visible=False,
xaxis=dict(
autorange=True,
title="Days",
titlefont=dict(color="white"),
tickfont=dict(color="white"),
gridcolor="grey",
),
plot_bgcolor="rgba(0,0,0,0)",
paper_bgcolor="rgba(0,0,0,0)",
),
),
className="monte-carlo-graph",
)
但我有另一个问题,是否可以通过更改所使用的className中的CSS样式来实现这一点?
英文:
I found the solution, I needed to add this line to my graph layout:
margin=go.layout.Margin(r=0, t=0,),
So the code looks like this now:
monte_carlo_graph = dcc.Graph(
id="monte_carlo_graph",
figure=go.Figure(
data=simulations_traces,
layout=go.Layout(
showlegend=False,
title="",
yaxis=dict(
autorange=True,
title="Price",
titlefont=dict(color="white"),
tickfont=dict(color="white"),
gridcolor="grey",
),
margin=go.layout.Margin(r=0, t=0,),
xaxis_rangeslider_visible=False,
xaxis=dict(
autorange=True,
title="Days",
titlefont=dict(color="white"),
tickfont=dict(color="white"),
gridcolor="grey",
),
plot_bgcolor="rgba(0,0,0,0)",
paper_bgcolor="rgba(0,0,0,0)",
),
),
className="monte-carlo-graph",
)
But I have another question, is it possible to do this by changing css styling in used className?
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论