如何在角度中使用 Highcharts 甘特图？答案

【问题标题】：How to use Highcharts Gantt chart in angular?如何在角度中使用 Highcharts 甘特图？
【发布时间】：2017-11-10 17:02:56
【问题描述】：

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

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

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

【问题讨论】：

最简单的解决方案是将该 javascript 文件作为资产包含在内，然后像其他库包含一样 require('filelocation')(HighCharts)。
是否可以将其作为模块导入？
如果你的模块是指 Highcharts 模块，那么没有。 Highcharts Gantt 不是 Highcharts 的模块 - 它是一个单独的产品。它还没有发布，所以它没有官方的 NPM 包。您可以将 JS 代码加载为 Z。巴格利建议。
有任何关于使用甘特图的更新吗？？

标签： angular highcharts gantt-chart angular2-highcharts

【解决方案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 中工作正常

【讨论】：

你可以去掉@ViewChild，改用Highcharts.ganttChart('container', { ... });（container是div的id）