如何更改虚线图的大小？

Question

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

例如，当我在其中一个破折号上查看源代码时，它似乎计算出主绘图容器（svg容器）的高度为450px，图形本身的高度为270px（查看子块）。如果我能画出这个图，比如700像素，那就太好了。

我的问题是：调整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属性。

您可以在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 ^{} 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