Как использовать диаграмму Ганта Highcharts в angular?

Highcharts Gantt в настоящее время находится в альфа-версии, но мы можем использовать ее по этой ссылке.

Я хотел бы использовать эту библиотеку в угловом проекте, но я не нашел никакой документации, которая помогла бы мне в этом направлении. Является ли это возможным? Если да, то какова процедура?

В случае, если это пока невозможно, есть ли другая угловая библиотека для диаграммы Ганта?


angular highcharts angular2-highcharts gantt-chart
person Marcel Jr. Samson Morasse    schedule 10.11.2017    source источник
comment
Самым простым решением было бы просто включить этот файл javascript в качестве актива, а затем require('filelocation')(HighCharts) аналогично включению других библиотек.   -  person Z. Bagley    schedule 10.11.2017
comment
Можно ли вместо этого импортировать его как модуль?   -  person Marcel Jr. Samson Morasse    schedule 10.11.2017
comment
Если вы под модулем подразумеваете модуль Highcharts, то нет. Highcharts Gantt — это не модуль для Highcharts — это отдельный продукт. Он еще не опубликован, поэтому у него нет официального пакета NPM. Вы можете загрузить код JS как Z. – предложил Бэгли.   -  person Kacper Madej    schedule 14.11.2017
comment
какие-либо новости об использовании GanttChart ??   -  person asmatrk    schedule 10.02.2020

Ответы (1)


arrow_upward
1
arrow_downward

Эта процедура предназначена специально для Angular и highcharts gantt.

  1. Установите Highcharts из NPM, используя команду npm install --save highchats для последней версии.
  2. Создать компонент для диаграммы

в файле component.ts

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, AfterViewChecked } from '@angular/core';
import * as Highcharts from 'highcharts/highcharts-gantt';
@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements OnInit,AfterViewInit {
  @ViewChild('divRef', { static: false }) divReference: ElementRef;
  constructor() { }
  ngAfterViewInit() {
    this.highchartclick();
 }
ngOnInit(): void {

}
  highchartclick() {
    Highcharts.ganttChart(this.divReference.nativeElement as HTMLElement, {
      title: {
        text: 'Simple Gantt Chart'
      },
      chart: { renderTo: this.divReference.nativeElement as HTMLElement },
      series: [
        {
          name: 'Project 1',
          type: 'gantt',
          data: [
            {
              id: 's',
              name: 'Start prototype',
              start: Date.UTC(2014, 10, 20),
              end: Date.UTC(2014, 10, 20)
            }, {
              id: 'b',
              name: 'Develop',
              start: Date.UTC(2014, 10, 20),
              end: Date.UTC(2014, 10, 25),
              dependency: 's'
            }, {
              id: 'a',
              name: 'Run acceptance tests',
              start: Date.UTC(2014, 10, 23),
              end: Date.UTC(2014, 10, 26)
            },
            {
              name: 'Test prototype',
              start: Date.UTC(2014, 10, 24),
              end: Date.UTC(2014, 10, 29),
              dependency: ['a', 'b']
            }
          ]
        }]
    });
  }
}

в файле компонента .html


<div id="container" #divRef  ></div>

Надеюсь, это поможет другим, он отлично работает в версии angular 10 и highchart 8.1.2.

person Suganthy    schedule 10.07.2020
comment
вы можете удалить @ViewChild и использовать вместо него Highcharts.ganttChart('container', { ... }); (где container — это идентификатор div) - person Christophe Le Besnerais; 05.02.2021