web-dev-qa-db-ja.com

ダッシュグラフのサイズを変更するにはどうすればよいですか？

Dashのプロットでレイアウトの問題が発生しています。 Dashで生成するすべてのプロットは、非常に狭いように自動サイズ設定されているようです。そのため、クリエイティブなズームなしで実際にデータを表示することは困難です。

例として、ダッシュの1つでソースを表示すると、メインプロットコンテナ（svg-container）の高さが450px、グラフ自体の高さが270px（サブプロットを見る）と計算されているように見えます。 ）。たとえば700pxのグラフを作れるといいですね。

私の質問は、ダッシュボードのグラフのサイズを調整するための最良の方法は何ですか？私の最初の推測は、どういうわけかスタイルシートを添付することですが、適切なcssセレクターがどのようにまたは何であるかはわかりません。

ありがとうございました！

pythonplotlyplotly-dash
5
FelixVelariusBos

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オブジェクトスキーマ によると、heightは10以上の数値である必要があり、デフォルトは450（px）です。

ダッシュコールバックで、Graphオブジェクトを作成し、後でfigureを設定できることに注意してください。

たとえば、dcc.Sliderのvalueが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
4
jackdbd

これを行うには、プロットの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

7
user5359531