Question

我从图表组件中收到以下错误。我已经将ChartsModule导入到我的app.module.ts文件中，我不确定发生了什么？

    Can't bind to 'ChartType' since it isn't a known property of 'canvas'. ("
    [options]="barChartOptions"
    [legend]="barChartLegend"
    [ERROR ->][ChartType]="barChartType">

这是我的chart.component.ts文件：



const SAMPLE_BARCHART_DATA: any[] = [
  { data: [65, 59, 80, 81, 57, 54, 30], label: 'Fall Sales'},
  { data: [25, 39, 20, 41, 56, 53, 30], label: 'Spring Sales'},
];

const SAMPLE_BARCHART_LABELS: string[] = ['w1', 'w2' , 'w3', 'w4', 'w5', 'w6', 'w7'];

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


export class BarChartComponent implements OnInit {

  constructor() { }

  public barChartData: any[] = SAMPLE_BARCHART_DATA;
  public barChartLabels: string[] = SAMPLE_BARCHART_LABELS;
  public barChartType = 'bar';
  public barChartLegend = false;
  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };

  ngOnInit() {
  }

}

这是我的组件的HTML模板：

  <canvas baseChart
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [legend]="barChartLegend"
    [ChartType]="barChartType">
  </canvas>
</div>

以下是正确导入的app.module.ts文件：

import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { appRoutes } from '../routes';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { SectionDashboardComponent } from './Sections/section-dashboard/section-dashboard.component';
import { SectionComputerManagementComponent } from './Sections/section-computer-management/section-computer-management.component';
import { SectionHelpdeskLinksComponent } from './Sections/section-helpdesk-links/section-helpdesk-links.component';
import { BarChartComponent } from './charts/bar-chart/bar-chart.component';
import { LineChartComponent } from './charts/line-chart/line-chart.component';
import { PieChartComponent } from './charts/pie-chart/pie-chart.component';
import { ChartsModule } from 'ng2-charts';


@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    SidebarComponent,
    SectionDashboardComponent,
    SectionComputerManagementComponent,
    SectionHelpdeskLinksComponent,
    BarChartComponent,
    LineChartComponent,
    PieChartComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes),
    ChartsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

另外，这是我的angular.json文件样式和脚本：

 "styles": [
              "../ngsight/node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "../ngsight/node_modules/jquery/dist/jquery.min.js",
              "../ngsight/node_modules/popper.js/dist/umd/popper.min.js",
              "../ngsight/node_modules/chart.js/dist/chart.min.js",
              "../ngsight/node_modules/bootstrap/dist/js/bootstrap.min.js",
              "../ngsight/node_modules/chart.js/dist/Chart.bundle.min.js"
            ],

Answer 1

chartType是骆驼的情况。

在下面使用：

<canvas baseChart
 [datasets]="barChartData"
 [labels]="barChartLabels"
 [options]="barChartOptions"
 [legend]="barChartLegend"
 [chartType]="barChartType">
</canvas>

（NG2-CHARTS）无法绑定到图表类型，因为它不是

1 个答案: