我确实只有在app.component.html中有问题。我已经成功地在我的工作站中导入/安装了所有必要的库。下面是我正在练习的代码。我当前的IDE是VS代码。但是出现了这个问题:
无法绑定到“Highcharts”,因为它不是“highcharts-chart”的已知属性。1.如果“highcharts-chart”是Angular 组件并且它具有“Highcharts”输入,则请验证它是否是此模块的一部分。2.如果“highcharts-chart”是Web组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以取消显示此消息。3.若要允许任何属性添加““添加到该组件的”@NgModule.schemas“中。ngtsc(-998002)应用程序组件。ts(5,50):组件AppComponent的模板出错。
应用程序模块.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighchartsChartComponent } from 'highcharts-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HighchartsChartComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
应用程序.组件.ts
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
highcharts = Highcharts;
chartOptions = {
chart: {
type: "spline"
},
title: {
text: "Monthly Average Temperature"
},
subtitle: {
text: "Source: WorldClimate.com"
},
xAxis:{
categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
yAxis: {
title:{
text:"Temperature °C"
}
},
tooltip: {
valueSuffix:" °C"
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
};
}
应用程序.组件.html
<h1>FIRST</h1>
<highcharts-chart
[Highcharts] = "highcharts"
[options] = "chartOptions"
style = "width: 100%; height: 400px; display: block;">
</highcharts-chart>
<router-outlet></router-outlet>
1条答案
按热度按时间z0qdvdin1#
在您的
app.module.ts
中,您需要导入HighchartsChartModule
,而不是HighchartsChartComponent