APIで取得したデータをchart.jsで複数のチャートに表示したい

下記のJavaSriptでChart.jsにグラフを表示しています。現在は、一つのチャート内に3つのデータ（cases, death,reｃovered）が表示されておりますが、こちらを各チャートごとに１つのデータつず表示させるためにはどのようにすればよいでしょうか。

無知で申し訳ございませんが、教えていただけましたら幸いです。

const api = 'https://disease.sh/v3/covid-19/historical/all?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) => {
    let date = Object.keys(data.cases);
    let total = Object.values(data.cases);
    let deaths = Object.values(data.deaths);
    let recovered = Object.values(data.recovered);
    var ctx = document.getElementById('XXX').getContext('2d');
    let myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: date,
        datasets: [
          {
            label: 'Total Cases',
            data: total,
            borderColor: 'rgba(255, 99, 132)',
            fill: false,
          },
          {
            label: 'Recovered Cases',
            data: recovered,
            borderColor: 'rgba(153, 102, 255, 1)',
            fill: false,
          },
          {
            label: 'Deaths',
            data: deaths,
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false,
          },
        ],
      },

    });
  })


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

<body>
  <section>
    <div class="container mt-5">
        <div class="col-md-12 col-xl-12">
            <div class="card-block">
              <div class="chart-area">
                <canvas id="XXX"></canvas>
              </div>
            </div>
          </div>
        </div>
  </section>



</body>
</html>

eneko0513

2021/01/18 14:14

HTMLの方もください。

suusui

2021/01/18 14:25

ご連絡ありがとうございます。HTMLも追加させていただきました。よろしくお願いいたします。

eneko0513

2021/01/18 14:28

js/world_chart.js ってライブラリですか？上に提示されているスクリプトが書かれているファイルですか？

suusui

2021/01/18 14:38

すみません、はい、上記に記載したjsのファイル名です。

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

回答2件

ベストアンサー

javascript
1
2    const api = 'https://disease.sh/v3/covid-19/historical/all?lastdays=30';
3
4    const getData = async () => {
5        const response = await fetch(`${api}`);
6        if (response.ok) {
7            return await response.json();
8        } else {
9            return Promise.reject(response.status);
10        }
11    };
12
13    const result = getData();
14    result
15        .then((data) => {
16            let date = Object.keys(data.cases);
17            let total = Object.values(data.cases);
18            let deaths = Object.values(data.deaths);
19            let recovered = Object.values(data.recovered);
20
21            var ctx1 = document.getElementById('chart1').getContext('2d');
22            var ctx2 = document.getElementById('chart2').getContext('2d');
23            var ctx3 = document.getElementById('chart3').getContext('2d');
24
25            let myChart1 = new Chart(ctx1, {
26                type: 'line',
27                data: {
28                    labels: date,
29                    datasets: [
30                        {
31                            label: 'Total Cases',
32                            data: total,
33                            borderColor: 'rgba(255, 99, 132)',
34                            fill: false,
35                        },
36
37                    ],
38                },
39
40            });
41            let myChart2 = new Chart(ctx2, {
42                type: 'line',
43                data: {
44                    labels: date,
45                    datasets: [
46                        {
47                            label: 'Recovered Cases',
48                            data: recovered,
49                            borderColor: 'rgba(153, 102, 255, 1)',
50                            fill: false,
51                        },
52
53                    ],
54                },
55
56            });
57            let myChart3 = new Chart(ctx3, {
58                type: 'line',
59                data: {
60                    labels: date,
61                    datasets: [
62                        {
63                            label: 'Deaths',
64                            data: deaths,
65                            borderColor: 'rgba(75, 192, 192, 1)',
66                            fill: false,
67                        },
68
69                    ],
70                },
71
72            });
73        })
74
75        .catch((error) => {
76            console.log('Error: ', error);
77        });
78

HTML
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5
6  <meta charset="utf-8">
7  <meta http-equiv="X-UA-Compatible" content="IE=edge">
8  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9  <meta name="description" content="">
10  <meta name="author" content="">
11
12  <title></title>
13
14  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
15
16</head>
17
18<body>
19  <section>
20    <div class="container mt-5">
21        <div class="col-md-12 col-xl-12">
22            <div class="card-block">
23              <div class="chart-area">
24                <canvas id="chart1"></canvas>
25                <canvas id="chart2"></canvas>
26                <canvas id="chart3"></canvas>
27              </div>
28            </div>
29          </div>
30        </div>
31  </section>
32
33  <!-- Bootstrap core JavaScript -->
34  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
35  <script src="vendor/chart.js/Chart.min.js"></script>
36  <script src="js/world_chart.js"></script>
37
38
39
40</body>
41</html>

投稿2021/01/18 14:59

編集2021/01/18 15:00

退会済みユーザー

総合スコア0

suusui

2021/01/18 15:07

コードをそのまま反映させたら個別に３つ表示できるようになりました。勉強になりました。ありがとうございました！

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

javascript
1let myChart = new Chart(ctx, {
2type: 'line',
3data: {
4labels: date,
5datasets: [
6{
7label: 'Total Cases',
8data: total,
9borderColor: 'rgba(255, 99, 132)',
10fill: false,
11},
12{
13label: 'Recovered Cases',
14data: recovered,
15borderColor: 'rgba(153, 102, 255, 1)',
16fill: false,
17},
18{
19label: 'Deaths',
20data: deaths,
21borderColor: 'rgba(75, 192, 192, 1)',
22fill: false,
23},
24],
25},
26
27});
28})

これをそれぞれ3つ用意して、それぞれ違うCANVASに当てはめることで対応出来ませんか？
myChart_TotalCases, myChart_RecoveredCases, myChart_Death のような形です。
var ctx = document.getElementById('XXX').getContext('2d');もそれぞれ違うIDのCANVASを用意すれば3つにそれぞれ違う形で表現できると思います。

書いていることがやりたいことと違うのであれば、具体的に何が分からないのかを明示して見てください。

投稿2021/01/18 14:51

eneko0513

総合スコア349