无法在 Angular 7 中实现 FusionCharts 的甘特图

Question

我正在尝试将 Fusion 图表中的甘特图应用到我的 angular 7 项目中。但它只显示 "Loading chart. Please wait" 并且错误抛出说明 "Unhandled Promise rejection: ChunkLoadError: Loading chunk 7 failed"。我使用 https://www.fusioncharts.com/charts/gantt-charts/gantt-with-progress-indicators-for-each-task?framework=angular4 作为参考。请帮我解决这个问题。

app.componenet.html

<mat-card style="margin: auto; margin-top: 2%; text-align: center; width: 80%;">
 <fusioncharts
   width="700"
   height="400"
   type="gantt"
   dataFormat="json"
   [dataSource]="dataSource">
 </fusioncharts>

app.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, Validators, FormControl } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{


dataSource = {
chart: {
  dateformat: "mm/dd/yyyy",
  caption: "Event Planning Process",
  theme: "fusion",
  canvasborderalpha: "40",
  ganttlinealpha: "50"
},
tasks: {
  color: "#5D62B5",
  task: [
    {
      start: "03/07/2018",
      end: "03/17/2018"
    },
    {
      start: "03/14/2018",
      end: "03/28/2018"
    },
    {
      start: "03/15/2018",
      end: "03/31/2018"
    },
    {
      start: "04/02/2018",
      end: "04/12/2018"
    },
    {
      start: "04/12/2018",
      end: "04/30/2018"
    },
    {
      start: "04/20/2018",
      end: "05/06/2018"
    },
    {
      start: "04/30/2018",
      end: "05/10/2018"
    },
    {
      start: "04/30/2018",
      end: "05/25/2018"
    },
    {
      start: "05/04/2018",
      end: "06/05/2018"
    }
  ]
},
processes: {
  headertext: "Task",
  headeralign: "left",
  fontsize: "14",
  isbold: "0",
  align: "left",
  process: [
    {
      label: "Define event goals"
    },
    {
      label: "Source venue options"
    },
    {
      label: "Finalize speaker reach out list"
    },
    {
      label: "Compose sponsorship strategy"
    },
    {
      label: "Reach out to sponsors"
    },
    {
      label: "Create social media campaign"
    },
    {
      label: "Reach out to blogs for backlinks"
    },
    {
      label: "Optimize SEO ranking"
    },
    {
      label: "Publish event lead up vlog series"
    }
  ]
},
categories: [
  {
    category: [
      {
        start: "03/05/2018",
        end: "03/31/2018",
        label: "March"
      },
      {
        start: "04/01/2018",
        end: "04/30/2018",
        label: "April"
      },
      {
        start: "05/01/2018",
        end: "05/31/2018",
        label: "May"
      },
      {
        start: "06/01/2018",
        end: "06/10/2018",
        label: "June"
      }
    ]
  },
  {
    category: [
      {
        start: "03/05/2018",
        end: "03/11/2018",
        label: "W 1"
      },
      {
        start: "03/12/2018",
        end: "03/18/2018",
        label: "W 2"
      },
      {
        start: "03/19/2018",
        end: "03/25/2018",
        label: "W 3"
      },
      {
        start: "03/26/2018",
        end: "04/01/2018",
        label: "W 4"
      },
      {
        start: "04/02/2018",
        end: "04/08/2018",
        label: "W 5"
      },
      {
        start: "04/09/2018",
        end: "04/15/2018",
        label: "W 6"
      },
      {
        start: "04/16/2018",
        end: "04/22/2018",
        label: "W 7"
      },
      {
        start: "04/23/2018",
        end: "04/29/2018",
        label: "W 8"
      },
      {
        start: "04/30/2018",
        end: "05/06/2018",
        label: "W 9"
      },
      {
        start: "05/07/2018",
        end: "05/13/2018",
        label: "W 10"
      },
      {
        start: "05/14/2018",
        end: "05/20/2018",
        label: "W 11"
      },
      {
        start: "05/21/2018",
        end: "05/27/2018",
        label: "W 12"
      },
      {
        start: "05/28/2018",
        end: "06/03/2018",
        label: "W 13"
      },
      {
        start: "06/04/2018",
        end: "06/10/2018",
        label: "W 14"
      }
    ]
  }
   ]
  };
  constructor() { 
  }
  }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './app.material';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { FusionChartsModule } from 'angular-fusioncharts';

// Import FusionCharts library and chart modules
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// Pass the fusioncharts library and chart modules
Charts(FusionCharts);

FusionTheme(FusionCharts);

FusionChartsModule.fcRoot(FusionCharts);



@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    FusionChartsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
    NgbModule.forRoot()
  ],
  exports:[
    MaterialModule,
    FusionChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您需要导入以下 JS 文件以在 Angular 应用程序的 module.ts 文件中呈现甘特图：

从 "fusioncharts" 导入 * 作为 FusionCharts；

从 "fusioncharts/fusioncharts.widgets.js" 导入 * 作为小部件；

从 "fusioncharts/fusioncharts.gantt.js" 导入 * 作为甘特图；

如需进一步参考，请查看下面呈现甘特图的示例：

https://codesandbox.io/s/7z0o0r2jy6

无法在 Angular 7 中实现 FusionCharts 的甘特图

Could not implement Gantt chart from FusionCharts in Angular 7

angular7

fusioncharts