Угол 6: значение chartjs не обновляется при динамическом обновлении значения

Question

Я использую Angular 6.

В моем файле component.ts я должен инициализировать график и сделать это в методе ngOnIt () , подобном этому

@Component({
  selector: 'app-contact-detail',
  templateUrl: './contact-detail.component.html',
  styleUrls: ['./contact-detail.component.css']
})
export class ContactDetailComponent implements OnInit {

  contact_id: string;
  public graph_data_year;

  constructor(
    private activatedRoute: ActivatedRoute,
    private graphDataService: GraphDataService
  ) { }

  ngOnInit() {
    this.activatedRoute.params.subscribe(
      param => {
        this.contact_id = param['id'];
      }
    );


    /**
     * Get Amount Given Graph Data
     */
    this.graphDataService.get_data(this.contact_id).subscribe(
      res => {
        const data = [];
        res.forEach(e => {
          data.push(e.total);
        });
        this.graph_data_year = data;
        this._setGraphData();
      }
    );

    this.initializeGraph();
  }

  _setGraphData() {
    this.lineBigDashboardChartData[0]['data'] = this.graph_data_year;

    // this console here gives updated value in the console window, but no update on chart
    console.log(this.lineBigDashboardChartData);
  }

  /**
   * Graph
   */
  initializeGraph() {
    ...

    this.lineBigDashboardChartData = [
      {
        label: 'Data',
        ...
        ...
        data: this.graph_data_year
      }
    ];
    this.lineBigDashboardChartLabels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];

    this.lineBigDashboardChartType = 'line';
  }

}

и component.html похож на

<canvas baseChart id="bigDashboardChart"
   [datasets]="lineBigDashboardChartData"
   [labels]="lineBigDashboardChartLabels"
   [chartType]="lineBigDashboardChartType"></canvas>

Но это не обновляет диаграмму с обновленным значением graph_data_year , которое обновляется this.graphDataService . и показывает пустой график.

console.log(this.lineBigDashboardChartData); после обновления данных печатает обновленные значения в окне консоли, но данные диаграммы не обновляются.

Как я могу иметь асинхронную переменную внутри компонента, которая при обновлении обновляет значение в каждом месте, где она использовалась в компоненте? Или как я могу обновить корзину после обновления данных?

Answer 1

Расширенный ответ @Mehmet, и это решило мою проблему.

this.lineBigDashboardChartLabels.length = 0;
this.lineBigDashboardChartLabels.push(...label_data);

Answer 2

Canvas загружает диаграмму перед инициализацией данных. Добавьте * ngIf (данные имеют значение) к родительскому элементу div.

Это обеспечивает обновление данных перед загрузкой диаграммы.

Answer 3

Пожалуйста, попробуйте добавить ChartType следующим образом; [chartType]="'line'" И не стоит менять метки оригинальной ссылки на массив. Попробуйте это для создания динамических меток;

this.lineBigDashboardChartLabels.length = 0;
this.lineBigDashboardChartLabels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];

Answer 4

Что произойдет, если вы переместите this.initializeGraph() чуть ниже оператора console.log, который находится внутри ngOnInit

this.graphDataService.get_data(this.contact_id).subscribe(
  res => {
    const data = [];
    res.forEach(e => {
      data.push(e.total);
    });
    this.graph_data_year = data;
    console.log(this.graph_data_year);
    this.initializeGraph();
  }
);