Встроенное приложение dash (с использованием django_plotly_dash) не занимает достаточно места

#python #django #plotly #plotly-dash

Вопрос:

Я впервые интегрирую dash-приложение в django. Я использую django_plotly_dash для этого.

Я думаю, что делаю это стандартным способом:

urls.py

 from django.urls import path, include from . import views  urlpatterns = [  path('trial',views.trial,name='trial'), ]  

views.py

 from django.shortcuts import render from django.http import HttpResponse import my_first_dash_plotly_app.simple_dash_app def trial(request):  return render(request, 'my_first_dash_plotly_app/trial.html')  

simple_dash_app.py

 import dash_core_components as dcc import dash_html_components as html import plotly.express as px import pandas as pd from django_plotly_dash import DjangoDash app = DjangoDash('SimpleExample1')   # assume you have a "long-form" data frame # see https://plotly.com/python/px-arguments/ for more options df = pd.DataFrame({  "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],  "Amount": [4, 1, 2, 2, 4, 5],  "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"] })  fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")   app.layout = html.Div(style={}, children=[    dcc.Graph(  id='example-graph-2',  figure=fig  ) ])    

trial.html

 {%load plotly_dash%}  {%plotly_app name="SimpleExample1"%}  

Это всего лишь стандартный пример из введения в сюжет/тире.

Это как-то работает, но выглядит действительно уродливо. Вам нужно прокрутить, чтобы полностью увидеть сюжет. срежьте участок, где вы должны прокрутить, чтобы увидеть его полностью Если я правильно помню, я уже видел такое поведение за пределами мира джанго.

Есть ли простое решение? Должен ли я подать отчет об ошибке по этому поводу или это просто я делаю что-то совершенно неправильно? Я думаю, что такое поведение не должно быть по умолчанию: по умолчанию каждый график должен получать необходимый размер.

Ответ №1:

У меня была та же проблема, и я исправил ее, добавив ratio=1 в plotly_app тег. В вашем случае это было бы:

 {% plotly_app name="SimpleExample1" ratio=1 %}  

Проблема в том, что дочерний div элемент тега имеет высоту 0. Это ratio=1 устраняет эту проблему.

Комментарии:

1. Спасибо за ответ. Знаете ли вы, почему я вообще что-то вижу, хотя height число div равно нулю? Это потому padding-botton , что значение равно 10% (по крайней мере, по умолчанию), и вы видите график в области заполнения (а не в области содержимого)? Наивно было бы предположить, что если height число div равно нулю, то смотреть не на что… Я новичок в html, может быть, вы знаете хороший ресурс, который это объясняет?