我想在我的 angular2 应用程序中插入实时图表,我正在使用 angular2-highcharts。
npm install angular2-highcharts --save
应用程序组件.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>
应用程序模块.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 的提供者!”。 提前致谢。
最佳答案
我遇到了这个确切的问题。 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
的上下文中调用它似乎会导致:
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
我的猜测是 matthiaskomarek的解决方法避免了这种情况。
关于angular - 带有 angular2-highcharts 的实时图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42456855/