Блог

Главная - Вопросы по программированию - frappe-gantt не работает в моем приложении angular 10

frappe-gantt не работает в моем приложении angular 10

#javascript #angular #frappe

#javascript #angular #frappe

Вопрос:

Я работаю над проектом, в котором необходимо отображать задачи на диаграмме Ганта, я наткнулся на библиотеку с открытым исходным кодом frappe-gantt, и это подходит для моего варианта использования.

Я попытался реализовать это в своем приложении angular, я установил это и добавил js и css в angular.json

Затем я последовал примеру, приведенному на официальном сайте, добавил <svg> в html-файл и js script в ts-файл компонентов.

 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>

но опять не повезло, однако, когда я добавляю это в свой root index.html , оно там работает. Какой правильный способ использовать frappe-gantt в приложении angular 10? Поэтому я могу использовать свои компоненты везде, где захочу.

Метки: