如何使用Python调整Dash中图形的大小?
目标是最大限度地利用每个位置卡的饼图视图。如下图所示,饼图很小,不适合每个位置卡的窗口 舍弃了一些变通方法,但我无法正确复制它 如果有人能解释如何解决这个问题,我将不胜感激 再现上图的代码为:如何使用Python调整Dash中图形的大小?,python,plotly,plotly-dash,Python,Plotly,Plotly Dash,目标是最大限度地利用每个位置卡的饼图视图。如下图所示,饼图很小,不适合每个位置卡的窗口 舍弃了一些变通方法,但我无法正确复制它 如果有人能解释如何解决这个问题,我将不胜感激 再现上图的代码为: import dash import dash_html_components as html import dash_core_components as dcc from dash.dependencies import Input, Output import dash_bootstrap_com
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objs as go
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.config.suppress_callback_exceptions = True
labels = [['monkeys', 'elephants'],
['birds', 'dinosaurs'],
['unicorns', 'giraffes']]
values = [[50, 40],
[100, 10],
[100, 20]]
data = []
for label, value in zip(labels, values):
data.append(html.Div([dcc.Graph(figure={'data': [go.Pie(labels=label,
values=value,
hoverinfo='label+value+percent', textinfo='value'
)]})
], className='col-sm-4'))
labels_second = [['Human', 'Animal']]
values_second = [[40, 60]]
data_second = []
for label, value in zip(labels_second, values_second):
data_second.append(html.Div([dcc.Graph(figure={'data': [go.Pie(labels=label,
values=value,
hoverinfo='label+value+percent', textinfo='value'
)]})
], className='col-sm-4'))
def color_font():
selected_color = 'yellow'
style = {'textAlign': 'center', 'background': selected_color}
return style
def second_row():
return html.Div(className='four columns div-user-controls',
children=[
html.H2('Second Row', style=color_font()),
html.P('Display data Left')])
def multiple_rows():
return html.Div(className='rowxxx',
children=[
second_row(),
second_row(),
# my_tab(),
# html.Div(id='tabs-example-content')
])
def pie_chart_side_by_side():
return html.Div(data, className='row')
def pie_chart_single():
return html.Div(data_second, className='row')
def multiple_columns():
"""
Testing multiple column
"""
return dbc.Row(
[
dbc.Col(multiple_rows(), width=1),
dbc.Col(pie_chart_single()),
dbc.Col(pie_chart_side_by_side()),
], no_gutters=True, # Disable spacing between column
)
app.layout = html.Div(
children=[
multiple_columns(),
]
)
# Callback for
@app.callback(Output('tabs-example-content', 'children'),
[Input('tabs-example', 'value')])
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H3('Tab content 1')
])
elif tab == 'tab-2':
return html.Div([
html.H3('Tab content 2')
])
elif tab == 'tab-3':
return html.Div([
html.H3('Tab content 3')
])
# Run the app
if __name__ == '__main__':
app.run_server(debug=True)
参数样式负责调整打印大小 比如说,
style={"height": "50%", "width": "40%"}
样式
可按如下方式合并:
html.Div(html.Div([dcc.Graph(figure = {'data': [go.Pie(labels=['Human', 'Animal', 'Alien'],
values=[40, 59.1, 0.9],
title='Trend',
showlegend=False,
hoverinfo='label+value+percent', textinfo='value')]}
)
], style={"height": "60%", "width": "80%"}))
产生类似下面附件的东西