将组件变量以角度形式传递给JS库

Question

我有一个仪表板组件，页面上有显示图表。图表库需要数据才能呈现图表并在仪表板上显示。目前数据是静态的并且工作正常，但我需要通过API调用初始化的typescript变量给出数据。

信息中心HTML：

        <div class="panel panel-white">
          <div class="panel-heading clearfix">
            <h4 class="panel-title">Series Chart</h4>
          </div>
          <div class="panel-body">
            <canvas id="series-chart"></canvas>
          </div>
        </div>

信息中心组件：

export class DashboardComponent implements OnInit {

  totalSymbol = 0;
  chartLabels = ['A', 'B', 'C'];

  constructor(private http: HttpClient, private apiUrl: ApiUrlService) {
  }

  ngOnInit() {
    this.fetchTotalSymbol();
  }

  fetchTotalSymbol() {
    this.http.get(this.apiUrl.getBaseUrl() + 'symbol/count').subscribe(data => {
      this.totalSymbol = +data;
    });
  }

}

dashboard.js

$(document).ready(function () {

  "use strict";
  new Chart(document.getElementById("series-chart"),
    {
      "type": "doughnut",
      "data": {
        "labels": ["Red", "Blue", "Yellow"],
        "datasets": [{
          "label": "My First Dataset",
          "data": [300, 50, 100],
          "backgroundColor": ["rgb(236, 94, 105)", "rgb(0, 112, 224)", "rgb(241, 194, 5)"]
        }]
      }
    });

});

我需要在API调用dashboard.js后，从信息中心组件chartLabels将fetchTotalSymbol()中的标签红色，蓝色，黄色替换为A，B，C。

我在.angular-cli.json数组下的scripts中包含了dashboard.js。