🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

960閲覧

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

suusui

総合スコア15

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2021/01/24 07:18

編集2021/01/24 09:09

各国のデータを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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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 });

投稿2021/01/24 10:53

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

suusui

2021/01/24 11:57

ありがとうございます。こちらのコードでまさに実行したいことができました。コメントアウトで丁寧な解説もいただき本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問