Question

我想在angular2应用程序中插入实时图表，我正在使用angular2-highcharts。

npm install angular2-highcharts --save

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'app works!';
  options: Object;
  constructor() {
    this.options = {
      title : { text : 'simple chart' },
      series: [{
        data: [29.9, 71.5, 106.4, 129.2],
      }]
    };
  }

}

app.component.html

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

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import {ChartModule} from "angular2-highcharts";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,ChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

运行angular2应用程序时遇到此错误： “没有HighchartsStatic的提供者！”。提前谢谢。

Answer 1

I ran into this exact problem. This solution from matthiaskomarek did the trick for me:

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

declare var require: any;
export function highchartsFactory() {
  return require('highcharts');
}

@NgModule({
  imports: [
      ChartModule
  ],
  declarations: [ AppComponent ],
  exports: [],
  providers: [
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule

I'm not sure why this question was voted down, because it really an issue. I'm running into the exact same thing here!

The highchart documentation as it stands suggest that ChartModule.forRoot(require('highcharts') is all that is required (filling in, of course, the missing )in the documentation). With angular-cli projects, I can never get require to work, so declare var require: any; usually does the trick. Except here, calling it within the context of forRoot seems to result in:

ERROR in Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'require'. Consider exporting the symbol (position 18:14 in the original .ts file), resolving symbol AppModule in ... app/app.module.ts

My guess is that matthiaskomarek's workaround avoids this.

Answer 2

您需要在导入中使用ChartModule.forRoot()：

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ChartModule.forRoot(require('highcharts'))  // <-- HERE
  ],
  // ...
})
export class AppModule { }

Answer 3

另一种解决方法是，如果Marc Brazeau的修复不适合你（它不适合我），请执行以下操作：

CREATE TABLE dbo.Stores 
( 
  Id INT NOT NULL IDENTITY(1, 1) PRIMARY KEY,
  Name NVARCHAR(120) NOT NULL,
  Address_Id INT NULL,
  Latitude FLOAT NULL,
  Longitude FLOAT NULL
);

CREATE TABLE dbo.Users 
( 
  Id INT NOT NULL IDENTITY(1, 1) PRIMARY KEY,
  Name NVARCHAR(120) NOT NULL,
  Address_Id INT NULL,
  Latitude FLOAT NULL,
  Longitude FLOAT NULL
);

CREATE TABLE dbo.Addresses 
( 
  Id INT NOT NULL IDENTITY(1, 1) PRIMARY KEY,
  Street NVARCHAR(120) NOT NULL,
  PostalCode NVARCHAR(12) NOT NULL,
  City NVARCHAR(40) NOT NULL
);

ALTER TABLE dbo.Stores
  ADD CONSTRAINT Stores_Address_Id_FK FOREIGN KEY (Address_Id) REFERENCES dbo.Addresses(Id);

ALTER TABLE dbo.Users
  ADD CONSTRAINT Users_Address_Id_FK FOREIGN KEY (Address_Id) REFERENCES dbo.Addresses(Id);

Answer 4

最后得到了解决方案，请查看我的 app.module 文件：

import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from '@angular/material';
import 'hammerjs';
import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';

import { AppRouting } from './app.routing';
import { AppComponent } from './app.component';

declare var require: any;


export function highchartsFactory() {
      const hc = require('highcharts');
      const dd = require('highcharts/modules/drilldown');
      dd(hc);

      return hc;
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRouting,
    BrowserAnimationsModule,
    MaterialModule,
    ChartModule
  ],
  providers: [{
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    }],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 5

import { ChartModule } from 'angular2-highcharts';
import * as something  from 'highcharts';

@NgModule({
  declarations: [
  AppComponent],
imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  ChartModule.forRoot(something).ngModule
],
providers: [ChartModule.forRoot(something).providers],
bootstrap: [AppComponent]
})

带有angular2-highcharts的实时图表

5 个答案: