Question

我遇到了Dash上的情节布局困难。我使用Dash生成的所有图表都自动调整为非常窄，这使得在没有创意缩放的情况下很难实际查看数据。

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

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

谢谢！

Answer 1

我通过将绘图的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 dev自己经常发帖：https://community.plot.ly/c/dash

Answer 2

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 object schema，height必须是大于或等于10的数字，默认值为450（px）。

请注意，您可以在短划线回调中创建Graph对象并稍后设置figure。

例如，如果value的{{1}}影响您dcc.Slider的{{1}}属性，则会：

figure

Answer 3

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

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

这会将图形更改为浏览器视口高度的90％。您可以在此link.

上查看视口的更多信息

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

3 个答案: