1

我正在做一个需要在甘特图中显示任务的项目，我遇到了一个开源库frappe-gantt，这适合我的用例。

我尝试在我的角度应用程序中实现它，我已经安装了它并添加了jsandcssangular.json

然后我按照官网给出的例子，添加<svg>到组件的html文件和js scriptts文件中。

var tasks = [
  {
    id: 'Task 1',
    name: 'Redesign website',
    start: '2016-12-28',
    end: '2016-12-31',
    progress: 20,
    dependencies: 'Task 2, Task 3'
  },
]
var gantt = new Gantt("#gantt", tasks);
<svg id="gantt"></svg>

这不起作用，只显示空白，然后我在下面添加到index.html根目录

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.5.0/frappe-gantt.css" integrity="sha512-qxE5FnEACGZSuLsbaDLCYuMRrxuLhQz1HtOJ2+3dHXSnFlckToa1rXHajkgLciNSdq+FCE4ey8R8fqjrD3HO0g==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.5.0/frappe-gantt.min.js" integrity="sha512-5M8ejeX3DuiV4VGIFjHP5gpryPQb1dWYjzTUhBUKj81aT6ZZz6+wIG8k89nbjsiHFJHQbi/CByHQTe4mJOi3hw==" crossorigin="anonymous"></script>

这到我的组件html文件

<svg id="gantt"></svg>
<script>
var tasks = [
  {
    id: 'Task 1',
    name: 'Redesign website',
    start: '2016-12-28',
    end: '2016-12-31',
    progress: 20,
    dependencies: 'Task 2, Task 3'
  },
]
var gantt = new Gantt("#gantt", tasks);
</script>

但又不是运气，但是当我将它添加到我的根目录index.html时，它就在那里工作。frappe-gantt在 Angular 10 应用程序中使用的正确方法是什么？所以我可以在我想要的任何地方使用我的组件。

4

0 回答 0