情节图正在父容器之外

Question

我正在尝试在 Python 中使用 Plotly 构建一个仪表板。我已经初始化了一个仪表板，并使用 'dash_html_components.Div()' div 将其添加到 portions/containers 中。后来，我用 'dash_core_components.Graph()' 在 div 内绘制图形。当我尝试在 div 内绘制图表时出现问题，该图实际上超出了 div size/container。尽管图形保持宽度，但不保持高度。我在必要的地方添加了评论。

这是我的仪表板的图像，打勾的部分，我想在那里放置一个图表。

没有图表的仪表板：

带图表的仪表板：

代码：

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objs as go
# import pandas_datareader.data as web # requires v0.6.0 or later
from datetime import datetime
import pandas as pd
from datetime import datetime
 
 
 
#building Dashboard
app = dash.Dash()
 
app.layout = html.Div([    #(row=main, col=main) block
    
    html.Div([    ##(row=1, col=1) block
    ], style = {    ##(row=1, col=1) block style
        'display': 'block',
        'float': 'left',
        # 'margin': 'auto',
        'width': '25%',
        'height': '50%',
        # 'border': '1px solid #006600',
        'background-color': 'cyan'
    }),

    html.Div([    ##(row=1, col=2) block

        #graph containing div

        dcc.Graph(
            id = 'my_graph',
            figure={
                'data': [go.Scatter(
                    x = [0,1],
                    y = [0,1],
                    mode = 'lines'
                )],
                'layout': go.Layout(
                    title = 'graph',
                    autosize = True
                )
            }
        )

    ], style = {    ##(row=1, col=2) block style
        'display': 'block',
        'float': 'left',
        # 'margin': 'auto',
        'width': '25%',
        'height': '50%',
        # 'border': '1px solid #006600',
        'background-color': 'DarkCyan'
    }),

    html.Div([    ##(row=1, col=3) block
    ], style = {    ##(row=1, col=3) block sty;e
        'display': 'block',
        'float': 'left',
        # 'margin': 'auto',
        'width': '50%',
        'height': '50%',
        # 'border': '1px solid #006600',
        'background-color': 'MediumSeaGreen'
    })
 
    
    
    
    
    
], style = { #(row=main, col=main) block style
    'display': 'block',
    'float': 'center',
    'margin': '-1vw auto',
    # 'margin': '-1vw 11vw 0 11vw',
    'width': '70vw',
    'height': '30vw',
    # 'border': '1px solid #006600',
    'background-color': 'gray',
    'box-shadow': '10px 10px 5px gray'
    
})
 
 

if __name__ == '__main__':
    app.run_server(port=1000)

Answer 1

如果您想让 dcc.Graph 适合 html 布局，您需要为 dcc.Graph 指定一个 style 值。在这种情况下，您可以这样做：

dcc.Graph(
    id="my_graph",
    figure={
        "data": [go.Scatter(x=[0, 1], y=[0, 1], mode="lines")],
        "layout": go.Layout(title="graph", autosize=True),
    },
    style={'height': '100%'}
)

情节图正在父容器之外

Plotly graph is going outside parent container

python

plotly-dash