如何更改 Dash Graph 的大小?

问题描述 投票:0回答:6

我在 Dash 上的绘图上遇到了布局困难。我用 Dash 生成的所有绘图似乎都会自动调整大小,变得非常窄,这使得在没有一些创造性缩放的情况下很难实际查看数据。

举个例子,当我在一个破折号上查看源代码时,看起来它计算出主图容器(svg-container)的高度为 450px,图形本身的高度为 270px(查看次要情节)。如果我可以制作图表,比如说 700px,那就太好了。

我的问题是:调整 Dash 上图表尺寸的最佳方法是什么?我的第一个猜测是以某种方式附加一个样式表,但我不确定适当的 css 选择器如何或是什么。

谢谢!

python plotly plotly-dash
6个回答
62
投票

或者,您可以更改父容器中的视口大小,例如:

dcc.Graph(id='my-graph',style={'width': '90vh', 'height': '90vh'}) 

这会将图表更改为浏览器视口高度的 90%。您可以在此链接上查看视口的更多信息。


25
投票

一个

Graph
对象包含一个
figure
。每个
figure
都有
data
layout
属性。

您可以在

height
中设置
layout

dcc.Graph(
    id="my-graph",
    figure={
        "data": [
            {"x": [1, 2, 3], "y": [4, 1, 2], "type": "bar"},
            {"x": [1, 2, 3], "y": [2, 4, 5], "type": "bar"},
        ],
        "layout": {
            "title": "My Dash Graph",
            "height": 700,  # px
        },
    },
)

根据Plotly

figure
对象模式
height
必须是大于或等于10的数字,默认为450(px)。

请记住,您可以创建一个

Graph
对象并稍后在破折号回调中设置
figure

例如,如果

value
dcc.Slider
影响您的
figure
Graph
属性,您将拥有:

import plotly.graph_objs as go

dcc.Graph(id="my-graph")

@app.callback(
    output=Output("my-graph", "figure"),
    inputs=Input("slider", "value")])
def update_my_graph(value):
    data = go.Data(
        [
            go.Bar(x=[1, 2, 3], y=[4, 1, 2]),
            go.Bar(x=[1, 2, 3], y=[2, 4, 5]),
        ]
    layout = go.Layout(
        title="My Dash Graph",
        height=700
        )
    figure = go.Figure(data=data, layout=layout)
    return figure

13
投票

我通过将绘图的 div 作为子 div 放置在父 div 内,然后设置父 div 的大小来实现此目的。像这样的东西:

# main parent div for the app
main_div = html.Div(children = [
    # sub-div for the plot
    html.Div(children = [
                dcc.Graph(id = 'my-plot'),
    ])
    ],
    # set the sizing of the parent div
    style = {'display': 'inline-block', 'width': '48%'})

随着您的应用程序变得越来越复杂,您可能需要设置更多的 div 嵌套才能使其正常工作。您也可以直接在绘图的子 div 上设置

style
,具体取决于您的配置方式。

此外,我可能建议关注这里的 Dash 官方论坛,因为那里可能会有更多用户,而且 Dash 开发者本人也经常发帖:https://community.plot.ly/c/dash


5
投票

对我来说最好的事情就是将

dcc.Graph
元素设置为
responsive=True

dcc.Graph(figure=get_my_figure(), responsive=True)

这样它就像我所期望的那样适合父元素,并且我可以通过父元素中的样式来控制它:)


1
投票

首先我必须说,我将元素 graph() 从 Dash @app.callback 中的 Python 函数返回到 app.layout 元素。

在元素 dcc.Graph( ) 中,有一个名为“figure”的属性,要在该属性中显示图形,您必须指定figure =“something”,某物必须是或返回图形,例如:

figure=plot_plotly(预言家, 预测, Figsize= (1500, 700)) <-- (that worked for me).

正如您可能在返回图形的元素内部看到的那样,在我的例子“plot_ploty”中,您可以像我一样设置元素或属性“figsize”并确定高度和宽度。

如果返回figure到“figure”的元素没有“figsize”元素,你可以尝试直接设置宽度和高度,如下:

figure=px.line(预测, x='ds', y='yhat', title='先知预测', height= 700, width= 1500) <-- (that worked for me).

我认为有了这两种情况你就已经足够了,如果还没有,你可以查找图形文档来查看什么属性设置宽度和高度。


0
投票

使用

fig.show()
时,默认宽度和高度均为 100%,但使用 Dash Graph 时,图形高度默认固定为 450px,并且由于某些晦涩的原因,通过图表
height: 100%
属性设置
style
不起作用。不过,如果我们设置
'height': '95vh'
它就可以工作(不是 100vh 来防止垂直滚动条):

dcc.Graph(figure=fig, style={'width': '100%', 'height': '95vh'})

注意。

'width' : '90vh'
的问题是图形不会响应窗口宽度的变化。

© www.soinside.com 2019 - 2024. All rights reserved.