如何更改Dash Graph的大小？

Question

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

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

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

谢谢！

Answer 1

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

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

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

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
        },
    },
)

根据Plotlyfigure对象架构，height必须是大于等于 10 的数字，其默认值为 450 (px)。

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

例如，如果valueadcc.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

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嵌套才能起作用。您还可以style根据配置的方式直接在地块的sub-div上设置。

另外，我可能建议您在此处关注Dash官方论坛，因为那里可能会有更多的用户，以及Dash开发人员本人经常发布的信息：https : //community.plot.ly/c/dash

Answer 4

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

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

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