Pivottable.js не отображается должным образом в проекте django

Я тестирую pivottable.js в проекте django, вот код, который я использую в шаблоне HTML:

{% load static %}

{% block content %}

<script src={% static 'js/jquery-3.6.0.min.js' %}></script>
<script src={% static 'js/jqueryui/jquery-ui.min.js' %}></script>
<script type="text/javascript" src={% static 'pivot/dist/pivot.min.js' %}></script>

<script type="text/javascript">
$(function()
{
 $("#output").pivotUI(
    [
        {color: "blue", shape: "circle"},
        {color: "red", shape: "triangle"},
        {color: "red", shape: "triangle"},
        {color: "red", shape: "circle"},
        {color: "red", shape: "circle"},
        {color: "red", shape: "triangle"},
    ],
);
});
    </script>
        <div id="output" style="margin: 10px;">
        </div>
{% endblock %}

Следующий вывод:

Есть идеи, почему он не отображается должным образом, как на скриншоте ниже с сайта? Несмотря на то, что все файлы проекта pivottable.js находятся локально в моем проекте django?

Вернуться на верх