javascript - No se puede enlazar a 'chartType' ya que no es una propiedad conocida de 'canvas'

Estoy desarrollando una aplicación Angular 6 usando ng2-charts.

Sin embargo, recibo el siguiente error cuando depuro el proyecto con Visual Studio Code y veo una página en blanco cuando escribo "ng serve" y presiono Enter:

No se puede enlazar a 'chartType' ya que no es una propiedad conocida de 'canvas'

He intentado agregar "import {ChartsModule} from 'ng2-charts/ng2-charts';" al component.ts. Sin embargo, todavía recibo el mismo error.

Aquí está el código HTML del gráfico del archivo my-bar-chart.component.html:

<div style="display: block">
  <canvas mdbChart
      [chartType]="chartType"
      [datasets]="chartDatasets"
      [labels]="chartLabels"
      [colors]="chartColors"
      [options]="chartOptions"
      [legend]="true"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)">
  </canvas>
</div>

Aquí está el archivo my-bar-chart.commponent.ts:

import { Component, OnInit } from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {ChartsModule} from 'ng2-charts/ng2-charts';

@Component({
  selector: 'app-my-bar-chart',
  templateUrl: './my-bar-chart.component.html',
  styleUrls: ['./my-bar-chart.component.css']
})

export class MyBarChartComponent implements OnInit {
  public chartType: string = 'horizontalBar';

  public chartDatasets: Array<any> = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' }
  ];

  public chartLabels: Array<any> = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

  public chartColors: Array<any> = [
    {
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 2,
    }
  ];

  public chartOptions: any = {
    responsive: true
  };
  public chartClicked(e: any): void { }
  public chartHovered(e: any): void { }

  constructor() { }
  ngOnInit() {
  }

}

Aquí está el archivo app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { MyBarChartComponent } from './my-bar-chart/my-bar-chart.component';
import { MyDoughnutChartComponent } from './my-doughnut-chart/my-doughnut-chart.component';
import { MyRadarChartComponent } from './my-radar-chart/my-radar-chart.component';
import { MyPieChartComponent } from './my-pie-chart/my-pie-chart.component';
import { Routes, RouterModule } from '@angular/router';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';


const routes: Routes=[
  {path:'bar-chart',component:MyBarChartComponent},
  {path:'doughnut-chart',component: MyDoughnutChartComponent},
  {path:'radar-chart',component:MyRadarChartComponent},
  {path:'pie-chart',component:MyPieChartComponent},
  {path:'**',component:MyBarChartComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    MyBarChartComponent,
    MyDoughnutChartComponent,
    MyRadarChartComponent,
    MyPieChartComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    NgbModule.forRoot(),
    ChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Espero ver el gráfico cuando escriba "ng serve" y presione Enter

Respuesta #1

No estás usando la directiva correcta.

Por favor, considere esta directiva: baseChart según el documento