Блог

Я использую Django и пытаюсь встроить графические графики в свои HTML-шаблоны. Для тестирования я скопировал простые примеры в свой views.py .

Это 2-й график:

 # Plot 2
animals = ['giraffes', 'orangutans', 'monkeys']
fig2 = go.Figure([go.Bar(x=animals, y=[20, 14, 23])])
plot_div2 = plot(fig2, output_type='div', include_plotlyjs=False)
  

Все графики включены в context dict.

 context = {
    'plots': {
        'test1': plot_div1,
        'test2': plot_div2,
    },
}
  

В моем шаблоне home.html есть адаптивная сетка (12 столбцов). Графики отображаются рядом (каждый график находится внутри элемента с 6 столбцами).

Итак, один график выглядит так:

 <div class="p-relative col-6 pd-5 border-box elevation-1 primary">
    <div class="p-relative border-box w-full">
        {{plots.test1|safe}}
    </div>
</div>
  

Родительский элемент CSS:

 position: relative;
grid-column-end: span 6;
padding: 1.25rem;
box-sizing: border-box;
box-shadow: ... ;
background: ...;
  

Дочерний элемент CSS:

 position: relative;
box-sizing: border-box;
width: 100%;
  

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

Переполнение графика (рисунок)

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

Правка 2: я добавил две функции JS, которые автоматически подгоняют графики. * Но есть ли встроенная функция Plotly для этого? Каким-то образом функция plotly, которая вызывается при изменении размера окна, должна работать.