angular如何使用Highcharts甘特图？

Question

Highcharts 甘特图目前处于 Alpha 阶段，但我们可以将其与此一起使用 link

我想在 angular 项目中使用这个库，但我没有找到任何文档来帮助我朝这个方向发展。可能吗？如果有，程序是什么？

万一还不行，有没有其他的angular甘特图库？

Answer 1

此程序专门用于 Angular 和 highcharts 甘特图

使用“npm install --save highchats”命令从 NPM 安装 Highcharts 以获得最新版本
为图表创建组件

在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

中工作正常

angular如何使用Highcharts甘特图？

How to use Highcharts Gantt chart in angular?

gantt-chart

highcharts

angular2-highcharts

angular