исал пример приложения для извлечения данных из сервиса в формате json и привязки его к диаграмме в интерфейсе пользователя.

Проблема в том, что когда я пытаюсь связать данные, это не так. Я пытался связать данные разными способами, но безуспешно.

Функциональность следующая: Страница 1: содержит 2 раскрывающихся списка. 1 с типом диаграммы и 2 с типом образца. При выборе обоих раскрывающихся значений я нажимаю кнопку, которая вызывает функцию fetchData () в GlobalService.

Ниже приведен метод получения и установки в GlobalService

 getChartData() {
  return this.chartData;
 }

 setChartData(response: any) {
   this.chartData = response.data;
   // console.log(this.chartData);
 }

 getChartlabel() {
  return this.chartLabel;
 }

 setChartLabel(response: any) {
   this.chartLabel = response.label.label;
   // console.log(this.chartLabel);
 }

 getResponse() {
   return this.response;
 }
 setResponse(response: any) {
   this.response = response;
   // console.log(response);
 }

и функция идет так

 fetchData(chart: any, sample: any) {
  console.log();
  const request = {
    chartType: this.selectedChart, // 'BAR | LINE'
    sampleType: this.selectedSample // 'COUNT'
  };

  this.http.post('http://localhost:22222/school/getData', request, this.options)
    .subscribe(
      res => {
        res = res.json();
        const responseData = res;
        console.log(responseData);
        if (responseData.hasOwnProperty('data')) {
          console.log('Data Fetched');
          this.setResponse(responseData); // Setting response
          this.setChartData(responseData); // setting data
          this.setChartLabel(responseData); // setting label
          this.router.navigate(['/gotoChartPage']); // navigating to next page chart.html
        } else {
          alert('Data Fetch Failed');
        }
      });
 }

Теперь мой chart.html выглядит так, как указано вВот

<div id='barDiv' class="onerow" *ngIf="1">
        <h4 class="m-2">Bar Chart</h4>
    <div style="display: block">
        <canvas baseChart width="800" height="500"
                [datasets]="barChartData" // --> This is where i want to update Data
                [labels]="barChartLabels" // --> This is where i want to update Labels
                [options]="barChartOptions"
                [legend]="barChartLegend"
                [chartType]="barChartType">
          </canvas>
      </div>      

Тогда мой Chart.component выглядит следующим образом

  /*******************BAR CHART*********************************/
  public barChartOptions: any = {
     scaleShowVerticalLines: false,
    responsive: true
  };

 public barChartLabels: Array<any> = []; // ["STD 1", "STD 2", "STD 3", "STD 4", "STD 5", "STD 6", "STD 7", "STD 8", "STD 9", "STD 10"]; Sample Data
 public barChartType  = 'bar';
 public barChartLegend  = true;
 public barChartData: any[]  = []; // [ {'data': [40, 32, 42, 23, 43, 35, 50, 48, 37, 45], label: 'COUNT'}]; -- Sample Data

 constructor(private global: GlobalService) {
  this.barChartData =  this.global.chartData;
  this.barChartLabels =  this.global.chartLabel;
}

Мой ответ от JSON приходит в следующем формате:

Для отдельных наборов данных:

{
 "data":
    {"data": [40,32,42,23,43,35,50,48,37,45], "label":"COUNT"},
 "label":
    {"label":["STD 1","STD 2","STD 3","STD 4","STD 5","STD 6","STD 7","STD 8","STD 9","STD 10"]}
}

а также

Для нескольких наборов данных:

{
 "data":
    {"data": [40,32,42,23,43,35,50,48,37,45], "label":"MVM"},
    {"data": [04,03,02,03,03,05,50,80,07,45], "label":"HVD"},
    {"data": [20,32,42,23,43,60,50,48,70,40], "label":"BMS"},
 "label":
    {"label":["STD 1","STD 2","STD 3","STD 4","STD 5","STD 6","STD 7","STD 8","STD 9","STD 10"]}
}

Когда я пытаюсь назначить таким способом, график не появляется. Но если я жестко закодирую значения в barChartLabels & barChartData, отобразятся диаграммы.

Я тоже так пробовал

`<canvas baseChart width="800" height="500"
   [datasets]="global.chartData" // --> This is where I need to update Data
   [labels]="global.chartLabel" // --> This is where I need to update Labels
   [options]="barChartOptions"
   [legend]="barChartLegend"
   [chartType]="barChartType">
 </canvas>`

Помощь приветствуется. Я застрял с этим больше, чем может придумать мой мозг.

Я наткнулся на этот пример в стеке:CLICK & CLICK Но это не правильный способ сделать.

Мне интересно, почему данные не привязываются к таким диаграммам напрямую

   [datasets]="global.chartData" // --> This is where I need to update Data
   [labels]="global.chartLabel"