我正在尝试在angular应用程序中添加谷歌图表,我已经完成了以下步骤
-
npm install angular-google-charts --save
-
之后,我已经导入到应用程序模块。
import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
imports: [
GoogleChartsModule
],
})
export class AppModule {}
- 在myComponent.html中调用
<google-chart #chart [title]="title" [type]="type" [data]="data [columnNames]="columnNames" [options]="options" [width]="width [height]="height">
</google-chart>
- 在我的组件中.ts
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { GoogleChartComponent } from 'angular-google-charts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'googlechart';
type = 'PieChart';
data = [
['Name1', 5.0],
['Name2', 36.8],
['Name3', 42.8],
['Name4', 18.5],
['Name5', 16.2]
];
columnNames = ['Name', 'Percentage'];
options = {
};
width = 500;
height = 300;
constructor(){}
ngOnInit() {}
}
错误:
error NG8001: 'google-chart' is not a known element:
1. If 'google-chart' is an Angular component, then verify that it is part of this module.
2. If 'google-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
组件已在库中导出。https://github.com/FERNman/angular-google-charts/blob/master/libs/angular-google-charts/src/lib/google-charts.module.ts#L13
您可以使用schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
imports: [
GoogleChartsModule
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {}
这将解决问题。
我通过将其放入shared.module.ts.来解决问题
而不是如图所示在AppModule中。