angular - 如何在角度中使用 Highcharts 甘特图？

Question

Highcharts Gantt 目前处于 Alpha 阶段，但我们可以通过此链接使用它

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

如果还不可能，甘特图还有其他角度库吗？

Answer 1

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

1. 使用“npm install --save highchats”命令从 NPM 安装 Highcharts 以获得最新版本
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 中运行良好