Angular12でng2-chartsのチャート再更新が行われない

Question

前提・実現したいこと

Angular12を用いたWebアプリケーションを作ろうとしています。

外部APIをたたいて得られたデータをng2-chartsによりチャートにします。

再びAPIをたたたとき、先ほどのチャートを新しく得られたデータによって再描画したいと考えています。

発生している問題

はじめてAPIをたたいた結果によるチャートの描画を行うことはできています。

もう一度APIをたたいて変数を更新できているのに、チャートの再描画が走らず、前のデータのチャートのままになってしまいます。

以下は一回目のAPIコールの結果です。

このように、住所を入れて検索ボタンを押すと、気温をグラフを作成するのですが、

この状態から住所を変えて、再び検索ボタンを押しAPIコールすると以下のようになります。

データが書き換えられているはずであるのに、チャートの内容が前回のまま引き継がれてしまいます。

該当のソースコード

daily-temp-chart.component.tsの親コンポーネントで検索を行い、検索結果が@Input()に渡されます。

親コンポーネントにより渡されるdataSetの値が変化していることを、ngOnChangesライフサイクルメソッドで検知し、データの更新を行うような仕様となっています。

// daily-temp-chart.component.ts
import { Component, Input, SimpleChanges } from '@angular/core';
import { ChartDataSets, ChartType } from 'chart.js';
import { Color, Label } from 'ng2-charts';


@Component({
  selector: 'app-daily-temp-chart',
  templateUrl: './daily-temp-chart.component.html',
  styleUrls: ['./daily-temp-chart.component.scss']
})
export class DailyTempChartComponent {

  @Input() dataSet: any;  // 親から受け取るAPIコールの結果
  private datas: number[] = [];  // 気温データ格納用
  private indexs: string[] = []; // 時間格納用
  private minimam = 0;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['dataSet'].currentValue) {
      let val = changes['dataSet'].currentValue;
      // データ更新 ここの処理が重たいからか？
      for (let i = 0; i < val.hourly.length; i++) {
        this.indexs[i] = (new Date(val.hourly[i].dt * 1000).getHours().toString());
        this.datas[i] = +(val.hourly[i].temp - 273.15).toFixed(2);
      }
    }
  }
  // data
  public lineChartData: ChartDataSets[] = [
    {
      data: this.datas,
      label: 'Daily Temp'
    },
  ];

  // labels name
  public lineChartLabels: Label[] = this.indexs;

  // options
  public lineChartOptions = {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          steps: 10,
          stepValue: 10,
          min: this.minimam
        }
      }]
    }
  }

  // Colors
  public lineChartColors: Color[] = [
    {
      borderColor: 'black',
      backgroundColor: 'rgba(255,0,255,0.28)',
    },
  ]

  public lineChartLegend = true; // グラフの属性ラベル
  public lineChartPlugins = [];
  public lineChartType: ChartType = 'line'; // グラフの種類
}

<!-- daily-temp-chart.component.html -->
<div id="dailyChart">
  <canvas baseChart
    [datasets]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType"
    [plugins]="lineChartPlugins">
  </canvas>
</div>

<!-- parent.component.html -->
<div>
  <!-- 他のコンポーネントは省略 -->
  <!-- バインディング部分のみ示す -->
  <app-daily-temp-chart [dataSet]='dataSet'></app-daily-temp-chart>
</div>

試したこと

dataSet変数の中身が更新されているかを、console.logにより確認しました。

以下が一回目のAPIコール後のdataSetの中身です。

そのまま二回目のAPIコールをしたときの中身です。

これを見る限りでは、dataSetの中身は更新されているのですが、非同期処理の関係上なのかfor文が終わる前にチャートを表示してしまっているような気がします。(lat, lonの値を見ると明らか)

ですが、Web上ではなかなかうまい解決方法が見つかりませんでした。

補足情報（FW/ツールのバージョンなど）

説明がわかりにくい個所もあるかと思いますが、よろしくお願いします。

WSL: Ubuntu-20.04
Node: 14.17.1
npm: 6.14.13
Angular CLI: 12.1.0
typesctipt: 4.3.4
--------------------npm packages
chart.js: 2.9.3
ng2-charts: 2.4.2

Answer 1

ng2-chartsを利用したことはありませんがdataSetの参照が更新されたタイミングでlineChartDataやlineChartLabelsの参照は更新されていないからではないでしょうか。

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['dataSet'].currentValue) {
      let val = changes['dataSet'].currentValue;
      // データ更新 ここの処理が重たいからか？
      for (let i = 0; i < val.hourly.length; i++) {
        this.indexs[i] = (new Date(val.hourly[i].dt * 1000).getHours().toString());
        this.datas[i] = +(val.hourly[i].temp - 273.15).toFixed(2);
      }
    }
    // 参照を更新するために以下を追加
    this.lineChartData = [
      {
        data: this.datas,
        label: 'Daily Temp'
      },
    ];
  }

または変更検知処理を直接呼び出しても良いかもしれません。

  // 追加
  constructor(private cd: ChangeDetectorRef) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['dataSet'].currentValue) {
      let val = changes['dataSet'].currentValue;
      // データ更新 ここの処理が重たいからか？
      for (let i = 0; i < val.hourly.length; i++) {
        this.indexs[i] = (new Date(val.hourly[i].dt * 1000).getHours().toString());
        this.datas[i] = +(val.hourly[i].temp - 273.15).toFixed(2);
      }
    }
    // 変更検知を行うために追加
    this.cd.detectChanges()
  }

Comments

[yosse95ai]

うまくいきました。ありがとうございました。