如何调整plotlyexpress面积图大小？

Question

我在 Dash 应用程序上创建了一个绘制清晰的面积图。该图表工作正常，但 x 轴上的第一个点和最后一个点似乎超出了图表，只能看到一半（如附加屏幕截图所示）。我也尝试过更改图形的宽度和高度值，但似乎没有任何效果。我是 python 和 dash 的新手，所以任何帮助将不胜感激，还发布了我关于堆栈溢出的第一个问题，所以如果我错过了任何内容或没有正确完成，我深表歉意。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.express as px
import pandas as pd
import pyodbc
import dash_bootstrap_components as dbc
from datetime import datetime as dt
from app import app




page2 = html.Div(
    [

     
        dbc.Row(
            [
                dbc.Col(
                        # dbc.Card(
                                    html.Div(

                                        id="opportunity_heatmap",
                                        className="chart_div pretty_container",
                                        children = [
                                            dcc.Graph(id='my_graph',
                                                    
                                                      config={
                                                        'staticPlot': False,     # True, False
                                                        'scrollZoom': True,      # True, False
                                                        'doubleClick': 'reset',  # 'reset', 'autosize' or 'reset+autosize', False
                                                        'showTips': True,       # True, False
                                                        'displayModeBar': 'hover',  # True, False, 'hover'
                                                        'watermark': False,
                                                        # 'modeBarButtonsToRemove': ['pan2d','select2d'],
                                                    },
                                                )
                                            ]
                                    ),
                                # color="light", inverse=True),
                    md=12,
                ),
             
            ],
            no_gutters=True,
        ),

    
          

    ]
)




@app.callback(
    Output('my_graph','figure'),
    [Input('my_dropdown','value')]
)

def build_graph(trendGraph):

    dff=SQL_data
 



fig = px.area(dff, x="DeploymentDate", y="DeploymentID",  text='DeploymentID', color = 'DeploymentType' ,template='plotly_white'
                    ,category_orders={'DeploymentDate':['January-2019','February-2019','March-2019','April-2019','May-2019','June-2019','July-2019','August-2019','September-2019','October-2019','November-2019','December-2019','January-2020','February-2020','March-2020','April-2020','May-2020','June-2020','July-2020','August-2020','September-2020','October-2020','November-2020','December-2020','January-2021','February-2021']})

fig.update_layout(yaxis={'title':'No. of deployments'},
                    title={'text':'Deployments Trend',
                    'font':{'size':28},'x':0.5,'xanchor':'center'},
                    autosize=True,)
    
    return fig


def get_page2():
    return page2

Answer 1

绘图上绘制的内容不能溢出网格布局，否则在放大时我们不仅会看到文本值，还会看到延伸到网格之外的整个图形。

显示这些值的唯一方法是稍微缩小，这意味着x_range相应地初始化图形。这个想法是从相应的数据帧列中获取最小值和最大值，并根据需要扩展该范围。

例如，这里添加 4 年可以完全显示 y 值（x 轴上有年份的一般用例，@see https://plotly.com/python/filled-area-plots/）：

fig = px.area(
    df,
    x='year',
    y=y,
    color="continent",
    line_group="country",
    text=y,
    range_x=[df['year'].min()-2, df['year'].max()+2]
)