Question

我是新手使用Angular 2/4和Highchart NPM（angular2-highcharts），可以在这里找到（https://github.com/gevgeny/angular2-highcharts））Angular 4。

我能够安装angular-highchart npm。但是当我尝试将各种建议合并到HighChart以使用angular2-highcharts生成图表时，它失败了。有限的伪造的例子并不是很有帮助但是我厌倦了这里有关angular2-highchart https://github.com/gevgeny/angular2-highcharts/issues/176的论坛建议，这对我没什么帮助。

当我尝试在论坛链接中提到的那些时，我遇到了一堆错误。

如何使用带有Angular 4的HighChart创建各种（饼图，线条，蜡烛）图表？

这是我的代码：

UW-chart.ts

import { Component, OnInit }              from '@angular/core';
import { Router }                         from '@angular/router';
import { UWService }        from '../../service/uw.service';
// import { UnderwriterModel } from "app/underwriter/model/underwriter.model";
import { LoanModel } from "app/underwriter/model/loan.model";
import { ChartModule } from 'angular2-highcharts';
import { ChartModel } from "app/underwriter/model/chart.model";

@Component({
  selector: 'chart',
  templateUrl: './uw-charts.component.html',
  styleUrls: ['./uw-charts.component.css', '../uw.css']

})
export class UWChartsComponent implements OnInit {

  public errorMessage: string;
  public isWaiting: boolean;
  public isActionArray: boolean[] = [false, false];
  public ineligibleArray: string[];

  public chartsArray: ChartModel[];

  constructor( 
    private router: Router,
    private uwService: UWService

  ) { }

  ngOnInit() {
    this.errorMessage = "";
    this.isWaiting = false;
    for( let e of this.isActionArray ) { e = false; }    
    this.chartsArray = [];
    this.initData();
  }


   initData(): void {

    // this.uwService.getCharts()
    //   .subscribe(
    //     (successModel: ChartModel[]) => {
    //       this.chartsArray = successModel;
    //     },
    //     error => {
    //       this.onError(error);
    //     }
    //   );

 this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }]
        };

  }
    options: Object;

  clearErrors(): void {
    this.errorMessage = "";
  }

  onError(error): void 
  {
    this.isWaiting = false;
    console.log("ERROR!: " + error);
    this.errorMessage = "An unexpected error has occured. Please try again.";
  }

}

UW-chart.html

<div class="chart"></div>
      <chart [options]="options" > </chart>

UW-module.ts

import { NgModule }                    from '@angular/core';
import { CommonModule }                from '@angular/common';
import { FormsModule}                  from '@angular/forms';
import { MaterialModule }              from '@angular/material';
import { MdRadioModule }               from '@angular2-material/radio';
import { FlexLayoutModule }            from '@angular/flex-layout';
import 'hammerjs';

import { SharedModule }                from '../shared/shared.module';
import { ChartModule }            from 'angular2-highcharts'; 
 import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';

import { UWRoutingModule }             from './uw-routing.module';

 import { UWService }                   from './service/uw.service';
// import { InputMaskService }            from './service/input-mask.service';
 import { UWDashboardComponent }        from './ui/uw-dashboard/uw-dashboard.component';
 import { UWFooterComponent }           from './ui/uw-footer/uw-footer.component';
 import { UWHeaderComponent } from './ui/uw-header/uw-header.component';

 import { UWBsaamlComponent } from "app/underwriter/ui/uw-bsa-aml/uw-bsa-aml.component";
 import { UWChartsComponent } from "app/underwriter/ui/uw-charts/uw-charts.component";

 import * as Highcharts from 'highcharts'
 import * as HighchartsMore from 'highcharts/highcharts-more.src.js'
 HighchartsMore(Highcharts)

declare var require: any;
export function highchartsFactory() {
    const hc = require('highcharts/highstock');
    const dd = require('highcharts/modules/exporting');
    dd(hc);
    return hc;
}

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    MaterialModule,
    FlexLayoutModule,
    SharedModule,
    UWRoutingModule,
    //ChartModule.forRoot(require('highcharts'))
    ChartModule
  ],
  declarations: [

     UWChartsComponent,
     UWFooterComponent,
     UWHeaderComponent

  ],
  entryComponents: [

  ],  
  providers: [
     UWService,
    // InputMaskService
    { provide: HighchartsStatic, useFactory: highchartsFactory }
  ]
})
export class UWModule { }

Answer 1

使用角度4 cli项目和angular2-highcharts构建折线图

使用

安装angular2-highcharts

npm install angular2-highcharts --save

在app.module中导入以下内容

import { ChartModule} from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as highcharts from 'highcharts/highstock';

在app.module.ts

中导出highchartsFactory()

export function highchartsFactory() {
  return highcharts;
}

在导入数组中添加图表模块。

imports: [
    ...
    ChartModule,
    ...
  ],

在providers数组中添加以下内容：

providers: [{
    provide: HighchartsStatic,
    useFactory: highchartsFactory
  }],

现在你已经准备好使用angular2-highcharts了。在component.html

中添加以下内容

 <chart [options]="optionsLine"></chart>

在component.ts中，在构造函数中添加以下内容。您应该在文件中定义options: any;。

this.options = {
      title : { text : 'simple chart' },
      series: [{
        data: [29.9, 71.5, 106.4, 129],
      }]
    };

Angualr2 / 4 - 无法生成高图

1 个答案: