创建图表失败：无法从给定项目获取上下文

Question

我需要在同一组件的角度项目中显示3个简单的甜甜圈图。 我有3个diff指令来创建甜甜圈图并将其设置为画布的innerHTML。

我的component.html是

  <div  id="myDiv" class="details" [style.width.%]=chartWidth  >
    <canvas appEmployeeChart id="myCanvas" (click)="click('empChart')"></canvas>
  </div>

   <div  id="managerDiv" class="details" [style.width.%]=chartWidth >
    <canvas appManagerChart id="managerCanvas" (click)="click('empChart')"></canvas>
  </div>

  <div  id="hrDiv" class="details" [style.width.%]=chartWidth >
    <canvas appHrChart id="hrCanvas"></canvas>
  </div>

appEmployeeChart指令是

chart: Chart;

  options = {
    responsive: true,
    title: {
      display: true,
      position: "top",
      text: "Leave Docklet",
      fontSize: 18,
      fontColor: "#111"
    },
    legend: {
      display: true,
      position: "bottom",
    },
    tooltips: {
      enabled: true
    },
    pieceLabel: {
      mode: 'value',
      visible: true,
      fontSize: 18,
      fontColor: "#111"
    },
    label: {visible: true}
  };


  constructor(private employeeService: EmployeeService, el: ElementRef, renderer: Renderer) {

    //let employee = JSON.parse(sessionStorage.getItem('employee'));
    let currentEmpUserDetails = JSON.parse(sessionStorage.getItem('empUserDetails'));
    const currentEmpSysRole = currentEmpUserDetails.lmsSytsemRoles;

    if (currentEmpSysRole.indexOf("GetMyLeaves") == -1) {



      this.employeeService.getLeaves('P').subscribe(lf => {
        let pendingLeaves = lf.length;

        this.employeeService.getLeaves('A').subscribe(lf => {
          let approvedLeaves = lf.length;

          this.employeeService.getLeaves('R').subscribe(lf => {
            let rejectedLeaves = lf.length;

            this.employeeService.getLeaves('C').subscribe(lf => {
              let canceledLeaves = lf.length;

              this.employeeService.getBalanceLeaves().subscribe(lf => {
                let balanceLeaves = lf;

                this.employeeService.getOptionalLeaves().subscribe(lf => {
                  let optionalLeaves = lf;

                  this.chart = new Chart('myLeavesCanvas', {
                    type: 'doughnut',
                    data: {
                      labels: ["Leaves Pending", "Leaves Approved", "Rejected Leaves", "Canceled Leaves", "Balance Leaves", "Optional Leaves"],
                      datasets: [
                        {
                          label: ['P', 'A', 'R', 'C', 'B', 'O'],
                          data: [pendingLeaves, approvedLeaves, rejectedLeaves, canceledLeaves, balanceLeaves, optionalLeaves],
                          backgroundColor: [
                            "#33CCFF",
                            "#08526B",
                            "#687073",
                            "#203ECB",
                            "#D5D7E0",
                            "#46DCBB"
                          ],
                          borderColor: [
                            "#33CCFF",
                            "#08526B",
                            "#687073",
                            "#203ECB",
                            "#D5D7E0",
                            "#46DCBB"
                          ],
                          borderWidth: [1, 1, 1, 1, 1, 1]
                        }
                      ]
                    },
                    options: this.options
                  });
                });
              });
            });
          });
        });
      });


      renderer.setElementProperty(el.nativeElement, 'innerHTML', this.chart);

appHrChartDirective是

export class HrChartDirective {

  hrChart: Chart;

  options = {
    responsive: true,
    title: {
      display: true,
      position: "top",
      text: "My Team Docklet",
      fontSize: 18,
      fontColor: "#111"
    },
    legend: {
      display: true,
      position: "bottom",
    },
    tooltips: {
      enabled: true
    },
    pieceLabel: {
      mode: 'value',
      visible: true,
      fontSize: 18,
      fontColor: "#111"
    },
    label: {visible: true}
  };


  constructor(el: ElementRef, renderer: Renderer, private managerService: ManagerService) {
    alert('hr  directive loaded');

    let pendingLeaves = 6;
    let approvedLeaves = 6;
    let rejectedLeaves = 6;
    this.hrChart = new Chart('hrLeavesCanvas', {
      type: 'doughnut',
      data: {
        labels: ["Leaves Pending", "Leaves Approved", "Rejected Leaves"],
        datasets: [
          {
            label: ['P', 'A', 'R'],
            data: [pendingLeaves, approvedLeaves, rejectedLeaves],

            backgroundColor: [
              "#FFFF00",
              "#008000",
              "#FF0000"
            ],
            borderColor: [
              "#FFFF00",
              "#008000",
              "#FF0000"
            ],
            borderWidth: [1, 1, 1]
          }
        ]
      },
      options: this.options
    });

    alert(this.hrChart.canvas);

    renderer.setElementProperty(el.nativeElement, 'innerHTML', this.hrChart);


  }

现在，myDiv和ManagerDiv图表已正常加载，但第3个图表即hrDiv图表未加载，我得到无法创建图表：无法从控制台上的给定项目获取上下文错误。

我尝试从javascript调试器调试问题，并且观察到有角度的首先尝试加载3rd（hrDiv）图表，当时不存在html元素，因此ID为 hrCanvas 的画布不存在找到并且无法加载图表。

下次尝试加载managerCanvas时，存在html元素，并且图表已成功加载。

注意： appManagerDirective和appHrDirective之间的唯一区别是appManagerDirective通过使用appHrDirective具有硬编码数据的其余服务来带来数据。