在Dash图表中的空白空间:如何移除它们?

huangapple go评论79阅读模式
英文:

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?

huangapple
  • 本文由 发表于 2023年7月31日 22:12:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/76804454.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定