我正在嘗試創建一個圓形進度條，但我無法訪問 javascript 變量，為什么？

Question

我在我的 Django HTML 模板中使用 tailwind.css。 我正在嘗試重新創建這個圓圈https://tailwindcomponents.com/component/circular-progress-bar ，但我沒有滾動屏幕，我根據我的觀點設置了 static 百分比。

這個平均速率計算無關緊要，這在另一部分中起作用，它只是一個示例，用於顯示我想在我的徑向欄中執行的操作。

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 %}