Django - отображение диаграммы Ганта cdn npm в шаблоне

Я использую пакет npm под названием svelte-gantt через этот cdn здесь: npm cdn. Однако я не могу заставить график отображаться в шаблоне, я не могу найти пример его использования с django, поэтому я не уверен, возможно ли это.

Что я делаю неправильно, чтобы она не отображалась? Как я могу использовать диаграмму пакета & gantt chart в моем шаблоне django? 

{% extends "home/base.html" %}
{% block content %}
<style>
    #example-gantt {
        flex-grow: 1;
        overflow: auto;
        height: 600px;
        width: 100px;
    }
    .container {
        display: flex;
        overflow: auto;
        flex: 1;
    }
</style>

<div class="container">
    <div id="example-gantt"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/svelte-gantt@4.0.3-beta/index.min.js"></script>
<script>

    var options = {};

    var gantt = new SvelteGantt({
        // target a DOM element
        target: document.getElementById('example-gantt'),
        // svelte-gantt options
        props: options
    });
</script>
{% endblock content %}

Это компонент Svelte, и, конечно, вы не можете использовать его в виде обычного js. Играя с этим, я полагаю, что ссылка cdn на библиотеку просто сломана и на самом деле не дает вам собранный js, который работает независимо от используемого фреймворка, одним из решений может быть просто сборка компонента и импорт необходимых файлов:

node tools/build

<link  rel='stylesheet'  href='public/gantt-default.css'>
<link  rel='stylesheet'  href='dist/css/svelteGantt.css'>

<script  src='moment.js'></script>
<script  src='dist/index.iife.js'></script>

или используйте импорт ES6 в своем коде:

import { SvelteGantt, SvelteGanttTable } from 'svelte-gantt';

(как показано в руководстве из репо ветки gh-pages на GitHub создателя)

затем используйте SvelteGantt, как вы это делали.

Если вы не можете собрать библиотеку самостоятельно или не знаете, как это сделать, на GitHub создателя уже есть собранная библиотека:

https://github.com/ANovokmet/svelte-gantt/tree/gh-pages/dist

Помните, что при таком использовании компонент зависит от moment.js. Автор несколько раз заявлял, что работает над устранением этой зависимости.

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