NgChartsModule：条形图的数据未显示答案

【问题标题】：NgChartsModule: The data for bar graph is not showingNgChartsModule：条形图的数据未显示
【发布时间】：2022-08-07 18:27:45
【问题描述】：

由于无法将 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

标签： angular charts module chart.js

【解决方案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>

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

【讨论】：