如何更改我的 Dash Graph 的大小？

Question

我在 Dash 上的图上遇到了布局困难。 我使用 Dash 生成的所有绘图似乎都自动调整为非常窄的尺寸，这使得如果没有一些创造性的缩放就很难实际查看数据。

例如，当我在其中一个破折号上查看源代码时，它看起来好像计算出主 plot 容器（svg-container）的高度为 450px，图形本身的高度为 270px（查看子图） ）。 如果我可以制作图表，比如 700 像素，那就太好了。

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

谢谢！

Answer 1

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

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

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

Answer 2

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

您可以在layout设置height 。

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（像素）。

请记住，您可以稍后在破折号回调中创建一个Graph对象并设置figure 。

例如，如果dcc.Slider的value影响您的Graph的figure属性，您将拥有：

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

Answer 3

我通过将绘图的 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

Answer 4

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

在元素 dcc.Graph( ) 中有一个名为“figure”的属性，要在该属性中显示一个图形，您必须分配 figure = “something” 某个东西必须是或返回一个图形，例如：

figure=plot_plotly(prophet, predict, figsize= (1500, 700)) <-- （对我有用）。

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

如果返回图形为“figure”的元素没有“figsize”元素，可以尝试直接设置宽高，如下：

figure=px.line(forecast, x='ds', y='yhat', title='Prophet Predictions', height= 700, width= 1500) <-- （对我有用）。

我认为有了这两种情况你就足够了，如果没有，你可以查找图形文档以查看设置宽度和高度的属性。

Answer 5

对我有用的最好的事情就是将dcc.Graph元素设置为responsive=True

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

这样它有点像我期望的那样适合父元素，我可以通过父元素中的样式来控制它:)