Я использую приложение ниже и хочу адаптировать высоту div с id = "change-height". Для этого я добавляю параметр «высота» в параметр стиля.
div_g = html.Div([g_scatter]
, id = "change-height"
, style = {'width': '49%', 'display': 'inline-block', 'height': '200%'}
)
Но значение высоты не влияет. Но если я изменю параметр ширины, это повлияет. Как я могу настроить высоту div div_g? Могу ли я установить высоту того же значения, что и высота div div_xy?
from dash import Dash, html, dcc, Input, Output
import pandas as pd
import plotly.express as px
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)
df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')
dd_1 = dcc.Dropdown(
df['Indicator Name'].unique(),
'Fertility rate, total (births per woman)',
id='crossfilter-xaxis-column',
)
dd_2 = dcc.Dropdown(
df['Indicator Name'].unique(),
'Life expectancy at birth, total (years)',
id='crossfilter-yaxis-column'
)
ri_1 = dcc.RadioItems(
['Linear', 'Log'],
'Linear',
id='crossfilter-xaxis-type',
labelStyle = {'display': 'inline-block', 'marginTop': '5px'}
)
ri_2 = dcc.RadioItems(
['Linear', 'Log'],
'Linear',
id='crossfilter-yaxis-type',
labelStyle = {'display': 'inline-block', 'marginTop': '5px'}
)
gx = dcc.Graph(id='x-time-series')
gy = dcc.Graph(id='y-time-series')
div_dd = html.Div([dd_1, dd_2])
sl = dcc.Slider(
df['Year'].min(),
df['Year'].max(),
step=None,
id='crossfilter-year--slider',
value=df['Year'].max(),
marks = {str(year): str(year) for year in df['Year'].unique()}
)
div_xy = html.Div([ri_1,gx,ri_2,gy,sl]
, style = {'display': 'inline-block','width': '49%'})
g_scatter = dcc.Graph(
id='crossfilter-indicator-scatter',
hoverData = {'points': [{'customdata': 'Japan'}]}
)
div_g = html.Div([g_scatter]
, id = "change-height"
, style = {'width': '49%', 'display': 'inline-block', 'height': '200%'}
)
div_main = html.Div(
[div_xy,div_g]
,style = {"display": "flex"}
)
app.layout = html.Div(
[
div_dd
, div_main
]
)
@app.callback(
Output('crossfilter-indicator-scatter', 'figure'),
Input('crossfilter-xaxis-column', 'value'),
Input('crossfilter-yaxis-column', 'value'),
Input('crossfilter-xaxis-type', 'value'),
Input('crossfilter-yaxis-type', 'value'),
Input('crossfilter-year--slider', 'value'))
def update_graph(xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value):
dff = df[df['Year'] == year_value]
fig = px.scatter(x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']
)
fig.update_traces(customdata=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'])
fig.update_xaxes(title=xaxis_column_name, type='linear' if xaxis_type == 'Linear' else 'log')
fig.update_yaxes(title=yaxis_column_name, type='linear' if yaxis_type == 'Linear' else 'log')
fig.update_layout(margin = {'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest')
return fig
def create_time_series(dff, axis_type, title):
fig = px.scatter(dff, x='Year', y='Value')
fig.update_traces(mode='lines+markers')
fig.update_xaxes(showgrid=False)
fig.update_yaxes(type='linear' if axis_type == 'Linear' else 'log')
fig.add_annotation(x=0, y=0.85, xanchor='left', yanchor='bottom',
xref='paper', yref='paper', showarrow=False, align='left',
text=title)
fig.update_layout(height=225, margin = {'l': 20, 'b': 30, 'r': 10, 't': 10})
return fig
@app.callback(
Output('x-time-series', 'figure'),
Input('crossfilter-indicator-scatter', 'hoverData'),
Input('crossfilter-xaxis-column', 'value'),
Input('crossfilter-xaxis-type', 'value'))
def update_y_timeseries(hoverData, xaxis_column_name, axis_type):
country_name = hoverData['points'][0]['customdata']
dff = df[df['Country Name'] == country_name]
dff = dff[dff['Indicator Name'] == xaxis_column_name]
title = '<b>{}</b><br>{}'.format(country_name, xaxis_column_name)
return create_time_series(dff, axis_type, title)
@app.callback(
Output('y-time-series', 'figure'),
Input('crossfilter-indicator-scatter', 'hoverData'),
Input('crossfilter-yaxis-column', 'value'),
Input('crossfilter-yaxis-type', 'value'))
def update_x_timeseries(hoverData, yaxis_column_name, axis_type):
dff = df[df['Country Name'] == hoverData['points'][0]['customdata']]
dff = dff[dff['Indicator Name'] == yaxis_column_name]
return create_time_series(dff, axis_type, yaxis_column_name)
if __name__ == '__main__':
app.run_server(debug=True)
@hoatran тоже не влияет
Итак, что вы хотите получить? Вы хотите, чтобы высота точечного графика была такой же, как у двухстрочного графика?
Возможно, вам поможет пример из этого документа: https://dash.plotly.com/interactive-graphing?_gl=1*da79nm*_ga*MTM0MTQ3MDU2My4xNjU0MjQwMTM1*_ga_6G7EE0JNSC*MTY3MzQzMDc0Ny40MTcuMS4xNjczNDMzNDEwLjAuMC4w
@hoatran Я хочу изменить высоту div div_g
Возможно, вы можете изменить высоту графика, как показано ниже: fig.update_layout(height=1000,margin = {'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest') и это изменит высоту Div
Укажите высоту в пикселях.
div_g = html.Div([g_scatter]
, id = "change-height"
, style = {'width': '49%', 'display': 'inline-block', 'height': '200px'}
)
Если вы собираетесь использовать процентное значение для высоты, тогда ваш div должен находиться внутри другого div с определенной высотой, а родитель не может иметь display=flex, иначе процент не будет работать. См. отображение w3 и положение w3.
Если вы действительно хотите использовать проценты, вы можете установить position=absolute в стиле div_g, но тогда вам также придется указать верхнюю/левую позицию.
См. свойство высоты w3 для справки.
Делая то, что я сказал выше, указанный div изменяется по высоте, но вы не можете сказать, потому что фигура внутри div остается фиксированной. Если вы хотите изменить высоту фигуры, вы должны сделать это с помощью fig.update_layout в обратном вызове для фигуры.
fig.update_layout(height=200, margin = {'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest')
Это решение также не работает для меня (проверено на Edge и Firefox). На высоту это никак не влияет. Нет никакой разницы, использую ли я «, «высота»: «20 пикселей» или «высота»: «2000 пикселей».
О, я понимаю, почему. На самом деле div_g меняется, но вы не можете сказать, потому что высота фигуры остается прежней. Если вы хотите изменить высоту фигуры, сделайте это с помощью update_layout для вашей фигуры crossfilter-indicator-scatter.
Не могли бы вы попробовать 'height': '200' вместо 'height': '200%'.