Настройка высоты контейнера в html
enter image description hereim trying to adjust height of dash container ( white ) but icant seems to figure how to do it , this code and I would appreciate any help :
analytics.html :
{% extends 'frontend/base.html' %}
{% load plotly_dash %}
{% block content %}
<h2>Reports and Analytics</h2>
<div id="dash-container" style="width: 100%; height: 1200px; overflow: hidden;"> <!-- Adjust container height here -->
{% plotly_app name="Analytics" %}
</div>
{% endblock %}
analytics_dash.py :
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
from django_plotly_dash import DjangoDash
from .models import UserAction
from django.db.models import Count
# Create a Django Dash application
app = DjangoDash('Analytics')
def load_data():
actions = UserAction.objects.values('action_type').annotate(count=Count('id'))
return [action['action_type'] for action in actions], [action['count'] for action in actions]
# Define the layout of the Dash app
app.layout = html.Div([
dcc.Graph(
id='user-action-graph',
style={'width': '100%', 'height': '100%'} # Use 100% to fill container
)
], style={'width': '100%', 'height': '1200px'}) # Adjust to match container size
@app.callback(
Output('user-action-graph', 'figure'),
[Input('user-action-graph', 'id')]
)
def update_graph(_):
action_types, counts = load_data()
fig = go.Figure()
if not action_types or not counts:
fig.add_annotation(text="No Activity Data Available Yet", showarrow=False)
else:
fig.add_trace(go.Bar(
x=action_types,
y=counts,
marker=dict(color='royalblue', line=dict(color='black', width=1))
))
max_count = max(counts) if counts else 5
fig.update_layout(
title='User Activities',
xaxis_title='Action Type',
yaxis_title='Count',
yaxis=dict(range=[0, max_count + 2]),
margin=dict(l=40, r=40, b=40, t=40),
height=1000, # Match height with container
)
return fig`
я пытался самостоятельно настроить график dcc, тестировал с помощью min-height и max-height, но ничего не помогло, и удалось только сделать график внутри контейнера больше
Я считаю, что это относится не к Python, а к CSS. Вам следует поискать CSS-стили, такие как width, min-width, height и т. д. А также как они ведут себя для различных значений, таких как 100%
или 100vw
. Ну, у меня есть один для вас.
единственным решением, которое я нашел, было это :
{% extends 'frontend/base.html' %}
{% block content %}
<h2>Reports and Analytics</h2>
<iframe src="http://127.0.0.1:8000/django_plotly_dash/app/Analytics/"
style="width: 100%; height: 90vh; border: none;"></iframe>
{% endblock %}
````[enter image description here][1]
[1]: https://i.sstatic.net/Knexh9sG.png