实时图与angular2-highcharts

我想在我的angular2应用程序中插入实时图表，我正在使用angular2-highcharts。实时图与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提供商！”。在此先感谢。

来源

2017-02-25 naruto

你需要在进口使用ChartModule.forRoot()：

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

来源

2017-02-25 13:55:34 AngularChef

ChartModule.forRoot（）不工作 – naruto

你读过[文件]（https://github.com/gevgeny/angular2-highcharts）？清除所有可能的语法... – AngularChef

file systemjs.config.js not found ... map：{ ... 'angular2-highcharts'：'node_modules/angular2-highcharts'， 'highcharts'： 'node_modules/highcharts'， } ... 包：{ ... highcharts：{ 主： './highcharts.js'， defaultExtension： 'JS' }， 'angular2-highcharts'：{ 主：' ./index.js' ， defaultExtension：'js' } } – naruto

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] 
})

来源

2017-04-07 20:02:38 Tysuke

我就遇到了这个确切的问题。 This solution从matthiaskomarek的伎俩对我来说：

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

我不知道为什么这个问题被否决，因为它确实是一个问题。我在这里遇到完全相同的东西！

的highchart文档，因为它代表建议ChartModule.forRoot(require('highcharts')是所有必需的（填充的，当然，在文档中缺少)）。使用angular-cli项目，我永远不会得到require的工作，所以declare var require: any;通常会伎俩。除此之外，在forRoot的范围内调用它似乎导致：

遇到错误遇到静态解析符号值。引用本地（非导出）符号'require'。考虑出口（在原来的.ts文件位置18:14）符号，在...应用解析符号的AppModule/app.module.ts

我的猜测是，matthiaskomarek的解决办法避免这一点。

来源

2017-04-10 01:10:31

为我解决了它！非常感谢你 – 2017-08-08 13:37:56

如果马克·布拉佐的解决方法不为你工作（它没有对我来说）另一个解决方法是做到以下几点：

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

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

来源

2017-04-21 15:17:31 Markoorn

终于拿到了这个解决方案，请查看我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 { }

来源

2017-05-18 11:05:24 GsMalhotra

实时图与angular2-highcharts

回答

相关问题