[英]I am trying to create a circle progress bar, but I can not access the javascript variables, why?
我在我的 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 与视图中的速率值连接起来以进行此微积分。 但是,我得到的一切都是这样的:
但是,我正在尝试这样做:
有什么建议吗?
确保您使用的是 javascript 内容块
{% block javascripts %}{% endblock javascripts %}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.