複数のAPIからデータを取得して1つのグラフに表示させる方法（Javascript, Chart.js）

各国のデータをjavascriptとchart.jsで表示したいと思います。各国のデータのAPIのURLが異なる場合、どのようにスクリプトを書くべきがアドバイスをいただければと思います。

現在コメントアウトしているURLよりusTotal,ukTotalをjpTotalと同じように取得してグラフに表示したいです。

JavaScript

const api = 'https://disease.sh/v3/covid-19/historical/JPN?lastdays=30';

// api:'https://disease.sh/v3/covid-19/historical/USA?lastdays=30',
// api:'https://disease.sh/v3/covid-19/historical/UK?lastdays=30',



const getData = async () => {
  const response = await fetch(`${api}`);
  if (response.ok) {
    return await response.json();
  } else {
    return Promise.reject(response.status);
  }
};

const result = getData();
result
  .then((data) => {

    data = data.timeline != null ? data.timeline : data;
    let date = Object.keys(data.cases);
    let jpTotal = Object.values(data.cases);
    // let usTotal = Object.values(data.cases);
    // let ukTotal = Object.values(data.cases);
    var ctx = document.getElementById('chart').getContext('2d');
    let myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: date,
        datasets: [
          {
            label: 'Japan',
            data: jpTotal,
            borderColor: 'rgba(255, 99, 132)',
            fill: false,
          },
          // {
          //   label: 'USA',
          //   data: usTotal,
          //   borderColor: 'rgba(153, 102, 255, 1)',
          //   fill: false,
          // },
          // {
          //   label: 'UK',
          //   data: ukTotal,
          //   borderColor: 'rgba(75, 192, 192, 1)',
          //   fill: false,
          // },
        ],
      },


    });
  })


  .catch((error) => {
    console.log('Error: ', error);
  });

HTML

<html>
<body>

    <canvas id="chart"></canvas>

    <!-- Chart -->
  <script src="vendor/chart.js/Chart.min.js"></script>
  <script src="js/charts4.js"></script>

</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

下記のような感じになるでしょうか。

javascript
1const urls = [
2  "https://disease.sh/v3/covid-19/historical/JPN?lastdays=30",
3  "https://disease.sh/v3/covid-19/historical/USA?lastdays=30",
4  "https://disease.sh/v3/covid-19/historical/UK?lastdays=30",
5];
6
7// 複数apiエンドポイントから非同期で取得。
8const getData = () => {
9  return Promise.all(urls.map(url => fetch(url))).then((responses) =>
10    Promise.all(responses.map(resp => resp.json()))
11  );
12};
13
14// 国別のチャート色データ（プロパティ名はChartItemsのitem.countryと合わせておく必要あり）
15const countryColors = {
16  Japan: "rgba(255, 99, 132)",
17  USA: "rgba(153, 102, 255, 1)",
18  UK: "rgba(75, 192, 192, 1)",
19};
20
21const results = getData()
22  .then(data => {
23    const chartItems = [];
24    //各国別にチャート用データを作る
25    data.map(item => {
26      timeline = item.timeline != null ? item.timeline : item;
27      chartItems.push({
28        label: item.country,
29        data: Object.entries(timeline.cases).map((i) => ({ x: i[0], y: i[1] })),
30        borderColor: countryColors[item.country],
31        fill: false,
32      });
33    });
34    // チャートの作成
35    const ctx = document.getElementById("chart").getContext("2d");
36    const myChart = new Chart(ctx, {
37      type: "line",
38      data: {
39        labels: Object.entries(data[0].timeline.cases).map((i) => i[0]),
40        datasets: chartItems,
41      },
42    });
43  })
44  .catch((error) => {
45    console.log("Error: ", error);
46  });