Я пытаюсь создать круговой прогресс-бар, но не могу получить доступ к переменным javascript, почему?

Я работаю с tailwind.css в моем HTML-шаблоне Django. Я пытаюсь воссоздать этот круг https://tailwindcomponents.com/component/circular-progress-bar, но я не разворачиваю экран, я устанавливаю статический процент на основе значения из моего представления.

Вычисление средней скорости не имеет значения, это работает в другой части, это просто пример, чтобы показать, что я хочу сделать в моем радиальном баре.

class RatePage(TemplateView):

template_name = "tailwind/rate-page.html"

def get_context_data(self, **kwargs):

    context = super(RatePage, self).get_context_data(**kwargs)

    context['average_rate'] = 4.5

    return context

Это мой HTML шаблон.

<div class="flex flex-col">
  Score

  <svg class="w-20 h-20">
    <circle
      class="text-gray-300"
      stroke-width="5"
      stroke="currentColor"
      fill="transparent"
      r="30"
      cx="40"
      cy="40"
    />
    <circle
      class="text-blue-600"
      stroke-width="5"
      :stroke-dasharray="circumference"
      :stroke-dashoffset="circumference - percent / 100 * circumference"
      stroke-linecap="round"
      stroke="currentColor"
      fill="transparent"
      r="30"
      cx="40"
      cy="40"
    />
  </svg>
  <span class="absolute text-xl text-blue-700" x-text=30></span>
</div>

<script>
  let percent = rate;
  let circumference = 2 * Math.PI * 30;
</script>

Я пытаюсь связать JavaScript со значением курса из представления, чтобы сделать это вычисление. Но все, что я получаю, выглядит следующим образом:

enter image description here

Но я пытаюсь это сделать:

enter image description here

Есть предложения?

Убедитесь, что вы используете блок содержимого javascript

{% block javascripts %}{% endblock javascripts %}

Согласно ссылке, указанной в вашем вопросе, он требует наличия alphine.js в качестве зависимости.

Попробуйте добавить зависимость в свой скрипт.

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.2.2/cdn.js" defer></script>
Вернуться на верх