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

Posted 2023-02-16

【中文标题】如何更改我的 Dash Graph 的大小？

【英文标题】：How can I change the size of my Dash Graph?

【发布时间】：2018-02-27 10:57:52

【问题描述】：

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

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

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

谢谢！

【参考方案1】：

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

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

这会将图形更改为浏览器视口高度的 90%。你可以在这个link.看到更多的视口信息

【讨论】：

这是最被低估的回复。谢谢。

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

请记住，您可以稍后在破折号回调中创建一个 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

【参考方案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