APIで取得した通知を使ってChart.jsで表示したい

Question

素人の質問で申し訳ございません。
下記のコードを使用してAPIで数値を取得することができました。
この数値を下記のチャートの数値部分に挿入するにはどうすれば良いでしょうか。
現在、data: [10, 5],となっている数値をsummary.casesの数値に置き換えたいです。

var app = new Vue({
  el: '#pie',
  data: {
    countryInfoList: [],
    summary: null,
  },

  mounted () {
    this.initCountryInfo();
  },
  methods:{
      initCountryInfo: function() {

        const chartApis = [
          {
            api:'https://disease.sh/v3/covid-19/countries?yesterday=true'
          },
        ];

        chartApis.forEach((element) => {
          axios
          .get(`${element.api}`)
          .then(response => {
            if (Array.isArray(response.data)) {
              this.summary = {
                cases: 0,
                recovered: 0,
              };
              response.data.forEach((element) => {
                this.summary.cases += element.cases;
                this.summary.recovered += element.recovered;
              });
            }
          })
        });
      },
    }
})

// Pie Chart Example
var ctx = document.getElementById("myPieChart2");
var myPieChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    datasets: [{
      // この数値を上記で取得した数値に置き換えたい
      data: [10, 5],
    }],
  },

});

Comments

[退会済みユーザー]

ttps://reffect.co.jp/vue/chart-jsvue-jsaxios-display-graph
この記事に従ってやればできると思います。

[suusui]

アドバイスありがとうございます。教えていただいた記事を参考に挑戦してみます！

Answer 1

アドバイスいただいた記事を元に下記のように作成し表示させることができました。ありがとうございました。

var app = new Vue({
  el: '#pie',
  data: {
    countryInfoList: [],
    summary: null,
    data: []
  },

  mounted () {
    this.initCountryInfo();
  },
  methods:{
      initCountryInfo: function() {

        const chartApis = [
          {
            api:'https://disease.sh/v3/covid-19/countries?yesterday=true'
          },
        ];

        chartApis.forEach((element) => {
          axios
          .get(`${element.api}`)
          .then(response => {
            // レスポンスが配列の場合、世界のデータ
            if (Array.isArray(response.data)) {
              this.summary = {
                cases: 0,
                recovered: 0,
              };
              response.data.forEach((element) => {
                this.summary.cases += element.cases;
                this.summary.recovered += element.recovered;

                this.displayGraph();

              });
            }
          })
        });
      },

      displayGraph: function(){
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
        type: 'pie',

        data: {
        datasets: [{
        data: [this.summary.cases, this.summary.recovered],
        backgroundColor: ["#3e95cd", "#8e5ea2"],
        }],
        labels: ["Case","Recovered"
          ]
        },
        options: {
          title: {
          display: true,
          text: 'Case vs Recovered'
     }
   }
          });
        }
      }
    })