Python Plotly Dash：如何设置竖屏布局？

Question

我需要调整竖屏布局。为此，我在布局样式中使用参数 transform: rotate (270deg)。问题是我什至无法将图表适合垂直布局。示例：

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd


app = Dash(__name__)

df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/5d1ea79569ed194d432e56108a04d188/raw/a9f9e8076b837d541398e999dcbac2b2826a81f8/gdp-life-exp-2007.csv')

fig = px.scatter(df, x="gdp per capita", y="life expectancy",
                 size="population", color="continent", hover_name="country",
                 log_x=True, size_max=60)

df_2 = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig_2 = px.bar(df_2, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div([
    dcc.Graph(
        id='life-exp-vs-gdp',
        figure=fig
    ),
        dcc.Graph(
        id='example-graph',
        figure=fig_2
    )
], 
    style={
          'margin-top': '50px',
          'margin-bottom': '50px',
          'margin-left': '50px',
          'margin-right': '50px',
          'transform': 'rotate(270deg)',
          'backgroundColor':'gray',
          }
)

if __name__ == '__main__':
    app.run_server(debug=False)

水平模式：

垂直模式：

因此，正如您在垂直模式下看到的那样，图表不适合自己，布局中留下了很多空白 space。样式中 margin-top、margin-bottom 等参数的更改不会改变任何内容。

如何解决？

Answer 1

CSS 属性 width 将控制图形的高度（因为您要翻转 Div，在此上下文中宽度和高度开关的含义）。例如，您可以将页面高度的 n% 应用到 div 的高度（例如 width: 70%;），因此此值将取决于您要显示的内容以及您希望图表有多大.你也可以给它一个明确的像素值（例如 width: 400px）。所以像这样的东西可以工作：

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd


app = Dash(__name__)

df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/5d1ea79569ed194d432e56108a04d188/raw/a9f9e8076b837d541398e999dcbac2b2826a81f8/gdp-life-exp-2007.csv')

fig = px.scatter(df, x="gdp per capita", y="life expectancy",
                 size="population", color="continent", hover_name="country",
                 log_x=True)

df_2 = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig_2 = px.bar(df_2, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div([
    dcc.Graph(
        id='life-exp-vs-gdp',
        figure=fig
    ),
        dcc.Graph(
        id='example-graph',
        figure=fig_2
    )
], 
    style={
          'margin-top': '50px',
          'margin-bottom': '50px',
          'margin-left': '50px',
          'margin-right': '50px',
          'backgroundColor':'gray',
          'width': '50%',
          'transform': 'rotate(270deg)'
          }
)

if __name__ == '__main__':
    app.run_server(debug=False)

Python Plotly Dash：如何设置竖屏布局？

Python Plotly Dash: how the set layout for a vertical screen?

css

python

plotly

plotly-dash