Step1 全国の新規陽性者数グラフを作る

(1) 厚生労働省のオープンデータを利用して,全国の陽性者数を受信する

サンプルプログラムはここ

当サイト用に,厚生労働省のオープンデータ(CSV)から必要なデータを取得するAPIを作りました。このAPIをプログラム中で呼び出し,データを受信します。

!非同期モード

API=「./api/get_pcr_positive_daily.php」。
APIからAJAX受信。  // #1
対象を表示。       // #2

必ず「なでしこv3.2.25」以降の「非同期モード」を使ってください。

#1 AJAX受信 … URIを指定して,データを受信します。受信したデータは,対象という変数に格納されます。

#2対象という変数の中身を表示します。実態はCSV形式で,日付と新規陽性者数が並んでいます(次の説明を参照)。

(2) 受信したデータを利用して,棒グラフを描く

サンプルプログラムはここ

!非同期モード

API=「./api/get_pcr_positive_daily.php」。
APIからAJAX受信。
対象をCSV取得して棒グラフ描画。  // #3, #4

対象という変数には,次のような形式(CSV形式)でデータが入っています。

日付,新規陽性者数
2020/1/26,1
2020/1/27,0
2020/1/28,3
2020/1/29,1
 ...

#3 CSV取得 … CSV形式のデータを,二次元配列形式に変換します。詳しい説明は本家で。

#4 棒グラフ描画 … 二次元配列データを与えると,自動的に棒グラフを描いてくれます! 詳しい説明は本家で。

なでしこでは,様々な種類のグラフをカンタンに描くことができます!

Step2 都道府県別の新規陽性者数グラフを作る

(3) 全国の値と,都道府県別の値を受信する

サンプルプログラムはここ

!非同期モード

API=「./api/get_pcr_positive_daily2.php」。  // #5
APIからAJAX受信。
対象を表示。

(1)の時とはAPIが異なる(#5)ので注意。こちらのAPIでは,全国の値各都道府県の値をCSV形式で受信します。

(4) (3)で受信したデータを利用して,全国の陽性者数グラフを描く

サンプルプログラムはここ

!非同期モード

API=「./api/get_pcr_positive_daily2.php」。
APIからAJAX受信。
対象をCSV取得して結果へ代入。    // #6

// 全国データを作成
結果の1から「ALL」を表ピックアップ。    // #7
全国データ=それの1を表列削除。         // #8

// グラフ描画
全国データの0に["日付", "全国"]を配列挿入。  // #9 グラフのラベルを追加
全国データを棒グラフ描画。

受信するデータ(対象に格納されるデータ)は,次のような形式になっています。

Date,Prefecture,Newly confirmed cases
2021/8/14,ALL,20133
2021/8/14,Hokkaido,479
2021/8/14,Aomori,56
2021/8/14,Iwate,51
2021/8/14,Miyagi,153
2021/8/14,Akita,20
 ...
2021/8/14,Saitama,1800
2021/8/14,Chiba,1272
2021/8/14,Tokyo,5094
 ...

#6 … 上記のデータ(CSV形式)を,二次元配列形式に変換して,結果という変数へ代入します。

次に,上の(2)と同じデータ(全国の新規陽性者数の配列)を作るために,#7と#8で全国データという配列変数にデータを格納します。

#7 表ピックアップ … 結果という変数の2列目(列は0,1,…と数えるので結果の1からと書く)がALLになっている行だけを取り出して,それという変数へ格納します。

#7の実行後,それという変数(二次元配列)の中身は次のようになっています。

0列目1列目2列目
2020/1/26ALL1
2020/1/27ALL 0
2020/1/28 ALL 3
2020/1/29 ALL 1
2020/1/30 ALL3

#8 表列削除 … それという変数(二次元配列)の1列目を削除して,全国データという変数へ代入します。

#8の実行後,全国データという変数(二次元配列)の中身は次のようになっています。

0列目1列目
2020/1/261
2020/1/270
2020/1/28 3
2020/1/29 1
2020/1/30 3

#9 配列挿入 … 全国データという変数(二次元配列)の0行目(つまり先頭行)に,配列要素を追加します。

#9の実行後,全国データ という変数(二次元配列)の中身は次のようになっています。

0列目1列目
日付全国
2020/1/261
2020/1/270
2020/1/28 3
2020/1/29 1
2020/1/30 3

最後は,全国データという変数(二次元配列)のデータを利用して,棒グラフを描画します。そのとき0行目(先頭行)にある「日付」「全国」という文字列は,グラフのキャプション等で利用されます。

(5) (3)で受信したデータを利用して,全国と東京の陽性者数グラフを描く

サンプルプログラムはここ

!非同期モード

API=「./api/get_pcr_positive_daily2.php」。
APIからAJAX受信。
対象をCSV取得して結果へ代入。
結果の0を配列削除。            // #10 取得データの1行目は不要なので削除する

// 地域名の一覧を表示
結果の1を表列取得。            // #11
それの0を表重複削除して表示。  // #12

// 全国データを作成
結果の1から「ALL」を表ピックアップ。
全国データ=それの1を表列削除。


// 選択した地域のデータを追加
選択地域=「Tokyo」。          // #13 上の#12で表示された中から選んで設定する
結果の1から選択地域を表ピックアップ。  // #14 = #7と同じ
地域結果=それの2を表列取得。          // #14 = #11と同じ
表示データ=全国データの2に地域結果を表列挿入。  // #15

// グラフ描画
表示データの0に["日付", "全国", 選択地域]を配列挿入。
表示データを棒グラフ描画。

結果という配列(二次元配列)には,次のようにデータが入っています。

0列目1列目2列目
Date Prefecture Newly confirmed cases
2021/8/13 ALL20357
2021/8/13 Hokkaido454
2021/8/13 Aomori45
2021/8/14ALL20133
2021/8/14Hokkaido479
2021/8/14Aomori56

#10 配列削除 … 結果という変数(二次元配列)の0行目には「Date,Prefecture,Newly confirmed cases」という文字列が入っていますが,後で都道府県名を検索するときに不要なので,ここで削除しておきます。

#11 結果の1(列目)を表列取得 … 結果という変数(二次元配列)の1列目=都道府県名だけを取り出して,それという変数(配列)へ格納します。この状態では,配列の中身は,次のように都道府県名が日数と同じ数だけ重複しています。

ALL
Hokkaido
Aomori
 ...
ALL
Hokkaido
Aomori
 ...
ALL
Hokkaido
Aomori
 ...

#12 それの0(列目)を表重複削除 … それという変数(配列)を二次元配列に見立てて,0列目のデータ(つまりこの配列自体)から重複を削除する。これによって,都道府県名は1度ずつしか表示されなくなる。
 ※ここでは画面に表示させているだけだが,次の(6)ではこれをセレクトボックスのデータとして設定しています。

#13 … 選択地域という変数に,都道府県名を表す文字列をセットします。ここではTokyoにしていますが,#12で抽出された都道府県名の中から1つ選んで書いておけば,その都道府県のデータを抽出します。

#14 … (4)の#7,(5)の#11と同じ。地域結果という変数(配列)に,抽出した都道府県の新規陽性者数のデータが格納されます。

#15 全国データの2(列目)に地域結果を表列挿入 … 全国データという変数(二次元配列,上の#8の状態)の2列目(つまり最右列)に,地域結果という変数(配列)のデータ(#14で抽出したもの)を挿入して,表示データという変数(二次元配列)に格納します。

#15の実行後, 表示データという変数(二次元配列)には,次のようなデータが入っています。

0列目 (日付)1列目 (全国の陽性者数)2列目 (Tokyoの陽性者数)
2021/1/261 0
2021/1/2700
2021/1/2830
2021/8/12188934989
2021/8/13203575773
2021/8/14201335094

最後は,表示データという変数(二次元配列)のデータを利用して,棒グラフを描画します。

Step3 (5)を改良して,都道府県を選べるようにする

サンプルプログラムはここ

!非同期モード
API=「./api/get_pcr_positive_daily2.php」。
APIからAJAX受信。

対象をCSV取得して結果へ代入。
結果の0を配列削除。

// 地域名の一覧を表示
S=結果の1を表重複削除。
S=Sの1を表列取得。
Sの(Sから「ALL」を配列検索)を配列削除。    // #16
地域ボックス=Sのセレクトボックス作成。    // #17
グラフボタン=「グラフ描画」のボタン作成。 // #18

// 全国データを作成
全国データ=結果の1から「ALL」を表ピックアップ。
日付一覧=全国データの0を表列取得。    // 下の★で利用するため
全国結果=全国データの2を表列取得。    // 下の★で利用するため
全国データ=全国データの1を表列削除。


グラフボタンをクリックした時には       // #19
	// 選択した地域のデータを,配列に追加
	選択地域=地域ボックスのテキスト取得。        // #20
	地域結果=結果の1から選択地域を表ピックアップ。
	地域結果=地域結果の2を表列取得。
	表示データ=全国データの2に地域結果を表列挿入。

	// グラフ描画 方法2 配色を変えたいとき          #21
	dataset = {
	    labels: 日付一覧,
	    datasets: [{
	      label: '全国',
	      data: 全国結果,
	      backgroundColor: 'rgba(255,0,0,0.5)'
	    },{
	      label: 選択地域,
	      data: 地域結果,
	      backgroundColor: 'rgba(0,255,255,1)'
	    }]}
	datasetの棒グラフ描画。
ここまで。

#16 … 上の(5)の#12と同じことをしていますが,一旦変数Sへデータを格納しながら処理しています。#16の行では,変数S(二次元配列)から「ALL」という行を削除しています。都道府県名を選択させるセレクトボックスに「ALL」が表示されると困るからです。

#17#18 … 都道府県を選択させるセレクトボックスと,グラフを描画するボタンを設置します。

#19[グラフ描画]ボタンをクリックしたときの処理です。上の(5)の#13から#15までと同じ処理をしています。

#20選択地域という変数には,セレクトボックスで選択されている都道府県名の文字列(Hokkaido,Aomori等)が代入されます。これは#13を動的に処理しているのと同じことです。その後は#14#15と同じように処理して,表示データという変数(二次元配列)にデータを格納します。

#21 … 標準の「棒グラフ描画」命令ではグラフの色を指定できませんので,色を指定したいときはこのようにプログラムを書きます。詳細な説明は本家で。この処理のために,プログラム中の★印の処理で,日付一覧全国結果という変数(一次元配列)を作成しています。