Создайте класс-специфичный график для каждого элемента в цикле шаблона {% for%} в Flask

Question

Я работаю над превосходным онлайн-мега-учебником Flask и пытаюсь лучше понять шаблоны Jinja2 и то, как я могу использовать функцию {% for x in y %}.

У меня есть следующий шаблон.Это в маршруте для /events в моем routes.py.В функции routes.py я передаю ей список Event объектов.Я могу заставить шаблон перебирать список и создавать div для каждого Event, и выписывать его свойство name - достаточно просто - но в конечном итоге я хочу, чтобы каждый div Event также имел диаграмму, сгенерированную скаждый экземпляр Event данных конкретного события.

Прямо сейчас вы можете видеть, что у меня есть тестовая диаграмма Plotly, сгенерированная в цикле for, однако она только успешно создает диаграмму и присваивает ее элементу chart для первой итерации {% for %}петля.

 {% extends "base.html" %}

 {% block content %}
 <h1>Active Events</h1>
 <hr>
 {% for event in events %}
 <p>
   <a href="/event/{{ event.name }}">{{ event.name}}</a>
 </p>

 <div id="chart" class="chart">
 </div>

     <!-- D3.js -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
     <!-- Plotly.js -->
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

 <div id="test" class="test">
 </div>
     <script type="text/javascript">
         var data = [{
           type: 'bar',
           x: [20, 14, 23],
           y: ['giraffes', 'orangutans', 'monkeys'],
           orientation: 'h'
         }];

         Plotly.newPlot('chart',data);

     </script>

 {% endfor %}

 {% endblock %}

В данный момент я ожидаю, что каждый Event div будет иметь одну и ту же диаграмму, но в конечном итоге я хочу, чтобы каждый цикл for генерировал конкретную диаграмму на основе атрибутов Event.,

Спасибо за любую помощь!