Angular + Ng2 圖表：圖表未顯示為子組件

Question

我正在嘗試使用 Angular 學習 ng2-charts 以及我目前正在從事的項目。

所以基本上，我首先嘗試了一個新的 angular 項目，安裝了 ng2-charts npm i ng2-charts chart.js

我試圖通過將數據傳遞給子組件來實現它。 現在我想知道為什么我的圖表（子組件）不顯示任何內容。

代碼是這樣的。

圖表組件 // sample-chart.component.ts

import { Component, Input, OnInit } from "@angular/core";

@Component({
  selector: "app-sample-chart",
  templateUrl: "./sample-chart.component.html",
  styleUrls: ["./sample-chart.component.css"],
})
export class SampleChartComponent implements OnInit {
  @Input() barChartData;
  @Input() barChartLabels;
  @Input() barChartOptions;
  @Input() barChartPlugins;
  @Input() barChartLegend;
  @Input() barChartType;

  constructor() {}

  ngOnInit() {
    console.log(this.barChartData, "data");
  }
}

圖表組件 // sample-chart.component.html

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

應用組件 //.ts 文件

import { Component } from "@angular/core";
import { ChartOptions, ChartType, ChartDataSets } from "chart.js";
import { Label } from "ng2-charts";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "app";

  public barChartOptions: ChartOptions = {
    responsive: true,
    // We use these empty structures as placeholders for dynamic theming.
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: "end",
        align: "end",
      },
    },
  };
  public barChartLabels: Label[] = [
    "2006",
    "2007",
    "2008",
    "2009",
    "2010",
    "2011",
    "2012",
  ];
  public barChartType: ChartType = "bar";
  public barChartLegend = true;

  public barChartData: ChartDataSets[] = [
    { 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="text-align: center">
  <h1>Welcome to {{ title }}!</h1>

  <div style="display: block">
    <app-sample-chart
      [barChartData]="barChartData"
      [barChartLabels]="barChartLabels"
      [barChartOptions]="barChartOptions"
      [barChartPlugins]="barChartPlugins"
      [barChartLegend]="barChartLegend"
      [barChartType]="barChartType"
    >
    </app-sample-chart>
  </div>

  <!-- <router-outlet></router-outlet> -->
</div>

如果相關，這是使用的版本。

使用的圖表和 ng2-charts 版本

"@angular/core": "^6.0.3",
"chart.js": "^2.9.4",
"ng2-charts": "^2.4.2",

難道我做錯了什么？ 有什么建議么？

Answer 1

你能試試下面的代碼嗎？

sample-chart.component.html

<div style="display: block;">
   <canvas
     baseChart
     [datasets]="barChartData"
     [labels]="barChartLabels"
     [options]="barChartOptions"
     [plugins]="barChartPlugins"
     [legend]="barChartLegend"
     [chartType]="barChartType"
   >
   </canvas>
</div>

您忘記添加顯示塊 div。 你能在你的chart.component.html中試試這個嗎