[Javascript] PCR陽性者数をチャート表示する処理（入力部分）を改善してみた
こんにちは、@yasuです。
厚生労働省が提供しているデータでチャートを表示するプログラムの改良版です。
表示する内容は、以前のものと同じです。
厚生労働省が提供するデータはcsv、チャートライブラリの入力は、2個の配列であったため、
前回は、csvを手作業で2個の配列になるよう編集していましたが、
その編集作業が面倒だったので、
今回は、csvを手作業で2次元配列になるよう編集に改善しました。
csvから、javasctiptの２次元配列表記に編集するのは、比較的簡単であるからです。
さて、
厚生労働省オープンデータ「陽性者数」
https://toyokeizai.net/sp/visual/tko/covid19/csv/pcr_positive_daily.csv
厚生労働省オープンデータを元にJavascriptでデータを定義（前回の方法）
チャートライブラリの入力に合わせるため、面倒な加工が必要な方法。
https://ojagggyo.github.io/chart/sample_pcr.js
厚生労働省オープンデータを元にJavascriptでデータを定義（今回の方法）
厚生労働省オープンデータをあまり加工しなくて済む方法。
https://ojagggyo.github.io/chart/pcr_20211029.js
実行結果
https://ojagggyo.github.io/chart/pcr_20211029.html
ソース
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="./pcr_20211029.js"></script>
<script>
//2次元を2個の1次元に変換する。
var labels = [];
var datas = [];
for(var i=0;i<csv.length;i=i+1){
labels.push(csv[i][0]);
datas.push(csv[i][1]);
}
//
const data = {
labels: labels,
datasets: [{
label: '新規陽性者数',
backgroundColor: 'rgb(51, 221, 204)',
borderColor: 'rgb(51, 221, 204)',
data: datas,
}]
};
// === include 'setup' then 'config' above ===
const config = {
type: 'bar',
data: data,
options: {}
};
</script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
</body>
</html>
関連記事
[Javascript] 2次元配列を1次元配列に変換する
Chart.jsで厚労省が提供しているデータを表示してみました。
よくやった、共有してくれてありがとう
@yasu さん、こんにちは。
Steemitチームがアップボートしてくれるので #steemexclusive のタグ、 パワーアップしたときは #club5050 のタグを使って下さい。
Power Up and use #club5050 #steemexclusive for more upvotes from Steemit team.
How to use #steemexclusive 使い方
How to use #club5050 使い方
💡 Curation Guide (アップボートガイド) 💡