我正在尝试创建一个圆形进度条，但我无法访问 javascript 变量，为什么？

Question

我在我的 Django HTML 模板中使用 tailwind.css。我正在尝试重新创建这个圈子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 与视图中的速率值连接起来以进行此微积分。但是，我得到的一切都是这样的：

但是，我正在尝试这样做：

有什么建议吗？

Answer 1

确保您使用的是 javascript 内容块

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