NgChartsModule：条形图的数据未显示

Question

由于无法将 ChartsModule 导入到我的app.module.ts我试图单独发现ngchartmodule ，它有点工作。 但是条形图的数据没有显示。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { NgxPrintModule } from 'ngx-print';
import { HeaderComponent } from './header/header.component';
import { PaymentComponent } from './payment/payment.component';
import { CustomerListComponent } from './customer-list/customer-list.component';
import { InvoiceComponent } from './invoice/invoice.component';
import { PurchaselistComponent } from './purchaselist/purchaselist.component';
import { ConfirmOrderComponent } from './confirm-order/confirm-order.component';
import { ReportsComponent } from './reports/reports.component';
import { NgChartsModule } from 'ng2-charts';

  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    Ng2SearchPipeModule,
    NgxPrintModule,
    FormsModule,
    NgChartsModule,
    // BrowserAnimationsModule
  ],

报告.component.ts

import { Component, OnInit } from '@angular/core';
import { ChartDataset, ChartType, ChartOptions } from 'chart.js';
import { PostService } from '../post.service';


@Component({
  selector: 'app-reports',
  templateUrl: './reports.component.html',
  styleUrls: ['./reports.component.css']
})
export class ReportsComponent implements OnInit {
  public barChartOptions: ChartOptions = {
    responsive: true,
  };
  // public barChartLabels: [] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [];

  public barChartData: ChartDataset[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
  ];

HTML：

 <div style="display: block;">
            <canvas baseChart 
              [datasets]="barChartData"
              
              [options]="barChartOptions"
              [plugins]="barChartPlugins"
              [legend]="barChartLegend"
              [type]="'bar'">
            </canvas>
          </div> 

结果：

IDK这是怎么回事。 我希望有人会帮忙。

此条形图的参考： https://stackblitz.com/edit/ng2-charts-bar-template?file=src%2Fapp%2Fapp.component.html

注意：我在这个项目中使用了 angular 12

Answer 1

只需更改以下内容。 在reports.compononent.ts 中取消注释标签并使用

public barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];

然后在 html 中添加标签，如下所示

<canvas baseChart 
                  [datasets]="barChartData"
                  [labels]="barChartLabels"
                  [options]="barChartOptions"
                  [plugins]="barChartPlugins"
                  [legend]="barChartLegend"
                  [type]="'bar'">
                </canvas>

我认为图书馆需要标签和数据才能正常工作。 有了这个，我得到了以下图片结果