Django

Question

我正在使用一个名为 svelte-gantt via this cdn here: npm cdn 的 npm 包。但是，我终生无法在模板中显示图表，我找不到它与 django 一起使用的示例，所以我不确定是否可行。

它没有出现，我做错了什么？如何在我的 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 %}

Answer 1

那是一个 Svelte 组件，当然你不能像在普通 js 中那样使用它。玩弄它我想库的 cdn link 刚刚坏了，实际上并没有给你构建的 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。作者多次表示他也在努力消除这种依赖性。

Django - 在模板中显示 cdn npm 甘特图

Django - showing cdn npm gantt chart in template

javascript

npm