Блог

Я хочу отобразить три графика рядом друг с другом, каждый из которых занимает треть экрана. Прямо сейчас двое вместе, а другой находится под ними. Все они находятся на первой вкладке.

 first = html.Div(  [  dcc.Tabs(  [  dcc.Tab(  html.Div(  children=[  dcc.Graph(  figure=sentiment_bar,  style={  "display": "inline-block",  },    ),  dcc.Graph(  figure=sentiment_bar,  style={  "display": "inline-block",  },    ),  dcc.Graph(  figure=sentiment_bar,  style={  "display": "inline-block",  },    ),  ],  ),  ),  dcc.Tab(  label=" PrivacyConcerns ",  children=[dcc.Graph(figure=fig2)],  ),  ]  )  ] )  

Вам нужно добавить 'width': '33%' в style словарь, см. Пример ниже.

 import dash import dash_html_components as html import dash_core_components as dcc import plotly.graph_objects as go  app = dash.Dash(__name__)  app.layout = html.Div([   dcc.Tabs([   # First tab  dcc.Tab(label='Tab 1', children=[   # First graph  dcc.Graph(  figure=go.Figure(go.Bar(x=[1, 2, 3, 4], y=[10, 20, 30, 40])),  style={  'display': 'inline-block',  'vertical-align': 'top',  'width': '33%',  },  ),   # Second graph  dcc.Graph(  figure=go.Figure(go.Scatter(x=[1, 2, 3, 4], y=[10, 20, 30, 40])),  style={  'display': 'inline-block',  'vertical-align': 'top',  'width': '33%',  },  ),   # Third graph  dcc.Graph(  figure=go.Figure(go.Pie(values=[1, 2, 3, 4], labels=['a', 'b', 'c', 'd'])),  style={  'display': 'inline-block',  'vertical-align': 'top',  'width': '33%',  },  ),    ]),   # Second tab  dcc.Tab(label='Tab 2'),   # Third tab  dcc.Tab(label='Tab 3'),    ])  ])  if __name__ == '__main__':  app.run_server(host='127.0.0.1', debug=True)