带角度的实时图表2-highcharts
我想在我的angular2应用程序中插入实时图表，我正在使用angular2-highcharts。
npm install angular2-highcharts --saveapp.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应用程序时，我遇到了这个错误："No provider for HighchartsStatic!“提前谢谢。
回答 5
Stack Overflow用户
发布于 2017-04-10 01:10:31
我遇到了这个问题。来自matthiaskomarek的This solution为我做到了这一点：
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 )，在...中解析symbol AppModule ...app/app.module.ts
我的猜测是matthiaskomarek的变通方法避免了这一点。
Stack Overflow用户
发布于 2017-02-25 13:55:35
您需要在导入中使用ChartModule.forRoot()：
@NgModule({
imports: [
BrowserModule,
FormsModule,
ChartModule.forRoot(require('highcharts')) // <-- HERE
],
// ...
})
export class AppModule { }Stack Overflow用户
发布于 2017-04-21 15:17:31
如果Marc Brazeau的解决方案对你不起作用(它对我不起作用)，另一个解决办法是执行以下操作：
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 {
}https://stackoverflow.com/questions/42456855
复制相似问题
腾讯云开发者
