Question

我尝试在带有子组件的父亲组件中绘制图表，但我做不到，这是我的代码。

父亲组件：

@Component({
  selector: 'app-tickets',
  template: '<canvas id="newChart"></canvas>'
})
export class TicketsComponent implements OnInit {

  ngOnInit(): void {

    var chart = new Chart('newChart', {
      type: 'line',
      data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
          datasets: 
          [
            {
              label: 'Total De Cada Mes',
              data: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              backgroundColor: 'rgba(0, 123, 255, 0.5)',
              borderColor: 'rgba(0, 123, 155, 1)',
              borderWidth: 2
            },
            {
              label: 'Total de domicilios',
              data: [0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0],
              backgroundColor: 'rgba(12, 092, 323, 0.5)',
              borderColor: 'rgba(12, 092, 323, 1)',
              borderWidth: 2,
              hidden: true
            }
          ]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
    });
  }
}

如下所示：

但是，如果我尝试在子组件中执行相同的操作，则会发生这种情况。

父亲组件：

@Component({
  selector: 'app-tickets',
  template: '<app-tickets-chart id="newChart"></app-tickets-chart>'
})
export class TicketsComponent {
}

儿童组件（具有相同的图表）：

@Component({
  selector: 'app-tickets-chart',
  template: "<canvas [id]='chartId'></canvas>"
})
export class TicketsChartComponent implements AfterViewInit {

  @Input()
  public chartId: string;

  ngAfterViewInit(): void {
     if(this.chartId === '') {
      throw new Error("Attribute 'chartId' is required.");
    }

    var chart = new Chart(this.chartId, {
      type: 'line',
      data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
          datasets: 
          [
            {
              label: 'Total De Cada Mes',
              data: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              backgroundColor: 'rgba(0, 123, 255, 0.5)',
              borderColor: 'rgba(0, 123, 155, 1)',
              borderWidth: 2
            },
            {
              label: 'Total de domicilios',
              data: [0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0],
              backgroundColor: 'rgba(12, 092, 323, 0.5)',
              borderColor: 'rgba(12, 092, 323, 1)',
              borderWidth: 2,
              hidden: true
            }
          ]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
    });
  }
}

这看起来像这样：

我该怎么办？

Answer 1

我在子组件中添加了这种样式，并且解决了我的问题。

:host {
    display: block;
    width: 100%;
    height: 100%;
}

仅此而已。

Chart.js-为什么图表不能在子组件中呈现而在父组件中却可以呈现？

1 个答案: