Chart.js を使う

 データの可視化ツールとしての Chart.js があります。 参考1  参考2  参考3  参考4  参考5
 Chart.js は、グラフの情報を受け取って、Html5 で利用できる canvas を使って色々なグラフを書くことが出来ます。

■ Chart.js の利用準備

 Chart.js を使ってグラフを描くには、次の方法の何れかで Chart.js が機能するように組み込む必要があります。
  1. Chart.js 又は圧縮版の Chart.min.js ファイルをダウンロードして使う。 ダウンロードサイト
    引用記述例: <script src="Chart.js"></script>
  2. Chart.js 又は Chart.min.js のリンクサイトにリンクを張って利用する。 リンクサイト
    引用記述例: <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>

  注. Chart.js には ver.1(旧) と 2(新) があり、 <script>構文の仕様が異なります。チャートの宣言の仕様は次のように異なります。
   【ver.1.0】(旧) (関数チェーンを使用してチャートを生成)
   

   【ver.2.0】(新) (一般的なチャートオブジェクトを生成した後、グラフタイプ等を渡す)
   
   * 以下では【ver.2.0】を中心に説明します。

■ Chart.js の利用方法

 Chart.js を使ってグラフページを表示するには、以下のように記述 (ver.2.0) します。 Chart.js
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
  <div style="height:350px; width:500px; margin:0 auto;">   <!-- グラフ表示枠を規定 -->
    <canvas id="ChartID"></canvas>   <!-- ここにグラフを表示 -->
  </div>
  <script>
    // ここにChart.jsの処理詳細を記述
  </script>
</body>
</html>
  つまり、1. Chart.jsを呼び出し(5行目)、
      2. 表示するcanvas要素を用意し(9行目)、
      3. scriptでグラフの処理詳細を記述(12行目)します。

■ script の記述例

 グラフの詳細を表示する script は、以下のように記述します。 参考 別ページ表示
<script>
  var ctx = document.getElementById('ChartID').getContext('2d');
  var myChart = new Chart(ctx, {
      type:'line',       // 線グラフ
      data:{
        labels: ["2010","2011","2012","2013","2014","2015"],
        datasets: [{
          label: "JAPAN",
          fill: false,    // 下方の塗りつぶしせず
          backgroundColor: "#3A7AC9",
          borderWidth: 2,
          borderColor: "rgba(2,63,138,0.8)",
          pointBorderColor: "#fff",
          pointBackgroundColor: "rgba(2,63,138,0.8)",
          pointBorderWidth: 2,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "#1D5191",
          pointHoverBorderColor: "#fff",
          pointHoverBorderWidth: 2,
          tension: 0.2,
          data: [5, 7, 8, 3, 1, 4]
        }, {
          label: "日本",
          fill: false,    // 下方の塗りつぶしせず
          backgroundColor: "#DB514E",
          borderWidth: 2,
          borderColor: "rgba(201,60,58,0.8)",
          pointBorderColor: "#fff",
          pointBackgroundColor: "rgba(201,60,58,0.8)",
          pointBorderWidth: 2,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "#9A1B19",
          pointHoverBorderColor: "#fff",
          pointHoverBorderWidth: 2,
          tension: 0.2,
          data: [1, 4, 4, 2, 6, 7]
        }]
      },
      options: {
        responsive:false,
        scales: {
          xAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: '西暦 年',
              fontFamily: 'monospace',
              fontSize: 14
            },
            stacked: false,
            gridLines: {
              display: false    // 目盛を非表示
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,   
              labelString: '順位',
              fontFamily: 'monospace',
              fontSize: 14
            },
            ticks: {
              reverse: true,   // 逆向き目盛
              callback: function(value){
                return value+'位';
              }
            }
          }]
        }
      }
    }
   );
</script>
 概要 1. 'ChartID' という ID名の <canvas>要素に、getContextメソッドを呼び出します。(2行目)、
    2. getContext メソッドは描画オブジェクトを返し、ctxという名の変数に格納します。(3行目)、
    3. 【ver.2.0】ではグラフ詳細は、1) type:、2) data:、3) options: の3つのパラメータで記述します。(4,5-,39-行目)
   * type: グラフの種類指定、data: データとその描画オプションの詳細、options: グラフ全体の詳細 参考

■ 具体例1

 具体例(折れ線グラフ)を見てみます。

リスト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
  <div style="height:260px; width:500px; margin:0 auto; background:#eee;">
    <canvas id="ChartID"></canvas>
  </div>
  <script>
    var ctx = document.getElementById('ChartID').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',                 // 折れ線グラフを指定
      data: {
        labels: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        datasets: [{
            label: '札幌',
            data: [-3.5,-2.3,2.1,7.8,14.9,16.3,20.7,23.9,19.4,10.6,2.1,-1],
            backgroundColor: "rgba(53,155,251,0.4)"
          }, {
            label: '東京',
            data: [6.1,7.2,10.1,15.4,20.2,22.4,25.4,27.1,24.4,18.7,11.4,8.9],
            backgroundColor: "rgba(55,153,0,0.4)"
          }, {
            label: '那覇',
            data: [17.4,16.9,18.7,23,25.7,28.4,29.8,29.5,28.4,27.7,23.2,20.5],
            backgroundColor: "rgba(255,153,0,0.4)"
        }]
      },
      options: {
        title: {
          display: true,
          fontSize: 18,
          text: '各地の気温 (2016)'
        },
        responsive: true,
        scales: {
            xAxes: [{
               display: true,
               stacked: false,
               gridLines: {
                  display: false
               }
            }],
            yAxes: [{
               display: true,
               scaleLabel: {
                  display: true,
                  labelString: '温度',
                  fontFamily: 'monospace',
                  fontSize: 14
               },
               ticks: {
                  callback: function(value){
                     return value+'℃';
                  }
               }
            }]
        }
      }
    });
  </script>
</body>
</html>

解説

 この例では、3つのデータ列を折れ線グラフ表示しています。参考
( 1行目) chartjs 対応ページは、HTML5 上で展開します
( 5行目) ここでは Chart.js を Chart.js CDN で読込みます
( 9行目) canvas要素を用意します
(12行目) 2D(平面) Contextを設定し、具体的なグラフを以下に記述します
(14行目) まず折れ線グラフを指定します
(15行~) 折れ線のデータを記述します
(31行~) グラフオプションを記述します
(32行目) タイトルの記述を指定
(39行目) X軸の記述を指定
(46行目) Y軸の記述を指定

■ 具体例2

 csvデータを読み込んで散布図を描く例です。(csvデータは同じサーバー内に置く必要があります) 別窓表示

リスト

<!DOCTYPE html>
<html lang='ja'>
<head>
  <meta charset="utf-8">
  <title>コロナウイルス感染者</title>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js'></script>
  <style>
    #chartContainer { position: relative; width:1200px; margin:0 auto; }
    #gcvs { background:#ffe; padding:6px; }
    #memo { position:absolute; top:3px;right:0px; font-size:10px; }
  </style>
</head>
<body>
  <div id="chartContainer">
    <canvas id="gcvs"> </canvas>
    <div id="memo">*<a href="https://www.mhlw.go.jp/stf/newpage_10465.html" target="_blank">https://www.mhlw.go.jp/stf/newpage_10465.html</a><br><span style="border-bottom:0px solid #991; padding-left:0px;"> 2020/03/26</span></div>
  </div>
  <script>
    chartColors = { red: "#d00", blue: "#00d" }; // プロットの色指定
    var color = Chart.helpers.color;
    var dataxy1 = []; var dataxy2 = [];   //  連想配列用配列準備
    var datainn = new Array(); 
    main(); 
    function main() {
        // 1) ajaxでCSVファイルをロード
        var req = new XMLHttpRequest();
        var filePath =  'Wcol2.csv';   //  読込ファイル名
        req.open("GET", filePath, true);
        req.onload = function() {
          // 2) CSVデータ変換の呼び出し
          data = csv2Array(req.responseText);
          // 3) chart.jsデータ準備、4) chart.js描画の呼び出し
          drawChart3(data);
        }
        req.send(null);
      }; // main() end ---------------------    
            
      // 2) CSVから2次元連想配列に変換
    function csv2Array(str) {
        var csvData = [];
        var lines = str.split("\n");  // 各行に分割
 //       title = lines[1].split(",");              // 二行目(i=1)から項目を読みとる
        for (var i = 2; i < lines.length - 2; i++ ) {  // 三行目(i=2)から読み込み
          csvData[ i - 2 ] = lines[i].split(",");
        };   
        return csvData;
      }; //  csv2Array(str)  -------------------------------------
    
    function drawChart3(data) {
         for ( let i = 0; i < 77 ; i++ ){ // data.length -1  // 77件/212件中
           let datain1 = {}; let datain2 = {};
           datain1.x = data[i][2] ;  datain1.y = data[i][6] ; // 人口 感染者
           datain2.x = data[i][2] ;  datain2.y = data[i][7] ; // 人口 死者
           dataxy1[i] =  datain1 ; dataxy2[i] =  datain2 ;    // 連想配列に取込
           datainn.push( data[i][1]  );                       // 国名
         }
//    alert( JSON.stringify( dataxy1 ) + "<br>" + datainn );  // データチェック用
      // 個別データに付けるラベルの定義と表示
      var dataLabelPlugin = {
        afterDatasetsDraw: function(chart) {
          var ctx = chart.ctx;
          chart.data.datasets.forEach( function( dataset, i ) {
            var meta = chart.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach( function(element, index ) {
                    // Draw the text in black, with the specified font
                    ctx.fillStyle = 'rgb(0, 0, 0)';
                    var fontSize = 8; 
                    var fontStyle = 'normal';
                    var fontFamily = 'Helvetica Neue';
                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
                    var dataString ="";
                    if( i == 0 ){ dataString = datainn[index].toString(); };// 0列データに付加
                    if( i == 1 ){ dataString = datainn[index].toString(); };// 1列データに付加
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    var padding = 3;
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                });
            }  // if ここまで ---------------------------------
            ctx.font = "16px 'MS Bゴシック'";
            ctx.fillText("致死率 0.001%",1090,155); 
            ctx.stroke();
            ctx.beginPath();
            ctx.setLineDash([5, 5]);
            ctx.moveTo(226,543);
            ctx.lineTo(1185,141);
            ctx.stroke();
          }); // chart.data.datasets.forEach  ここまで  ------------------------
        }  // afterDatasetsDraw  ここまで   ------------------------------------
      }; // dataLabelPlugin ここまで  ---------------------------
    
      var ctx = document.getElementById('gcvs').getContext('2d'); // chart.js の実行
      window.myScatter = Chart.Scatter(ctx, {
        data: {
          datasets:[{
            label: "感染者",
            borderColor: window.chartColors.red,
            backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
            pointRadius: 2,
            data: dataxy1    // プロットデータ ---------------------
          },{
            label: "死亡者",
            borderColor: window.chartColors.blue,
            backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
            pointRadius: 2,
            data: dataxy2    // プロットデータ ---------------------
          }]
        },
        options:{
  //          responsive: false, // 図サイズをコンテナに合わす https://misc.0o0o.org/chartjs-doc-ja/general/responsive.html
            title: {             // 図のタイトル表示
                display: true,
                fontSize: 20,
                text: "コロナウイルス 感染者・死亡者 (対人口)"
            },
            legend: {          
     //           display: false,  // 凡例非表示
            },                
            scales: {
                xAxes: [
                    {
                        type: 'logarithmic',  // 対数軸
                        ticks: {
                            min: 2,           // 軸の最小値
                            max: 200000,      // 軸の最大値
                  //          stepSize: 5   // 目盛り・補助線の間隔
                        },
                        scaleLabel: {                  // ★横軸ラベル設定
                            display: true,
                            fontSize: 16,
                            labelString: '人口 (万人)',
                            // 文字の色 fontColor: 'black', 
                        },
                    }
                ],
                yAxes: [             // Y軸の設定
                    {
                        type: 'logarithmic',  // 対数軸
                        ticks: {
                            min: 1,       // 軸の最小値
                            max: 100000,      // 軸の最大値
                 //           stepSize: 50   // 目盛り・補助線の間隔
                        },
                        scaleLabel: {    // ラベルの表示
                            display: true,
                            fontSize: 16,
                            labelString: '人数'
                        }
                    }
                ]
            }
        },
        plugins: [dataLabelPlugin]     // 各点にラベルを付加
      });//  myScatter ここまで ---------------------------------
    }; //  drawChart3 ここまで ----------------------------------
  </script>
</body>
</html>

csv データ

,https://ecodb.net/ranking/imf_lp.html,,,,2020/3/26,https://www.mhlw.go.jp/stf/newpage_10465.html,,,
No.,名称,単位: 万人,,#,国・地域,感染者,死亡者,,
23,イタリア,6048,,23,イタリア,74386,7503,,
30,スペイン,4645,,27,スペイン,49515,3647,,
1,中国,139538,,1,中国,81285,3287,,
18,イラン,8236,,30,イラン,27017,2077,,
22,フランス,6473,,15,フランス,25233,1331,,
3,アメリカ,32735,,13,アメリカ,65285,1031,,
21,イギリス,6644,,24,イギリス,9529,422,,
66,オランダ,1718,,51,オランダ,6412,356,,
17,ドイツ,8290,,16,ドイツ,37323,206,,
77,ベルギー,1140,,28,ベルギー,4937,178,,
27,韓国,5164,,5,韓国,9241,131,,
95,スイス,848,,40,スイス,9765,103,,
19,トルコ,8200,,114,トルコ,2433,59,,
4,インドネシア,26416,,68,インドネシア,790,58,,
5,ブラジル,20850,,42,ブラジル,2433,57,,
10,日本,12650,,4,日本,1292,45,,
84,ポルトガル,1028,,70,ポルトガル,2995,43,,
86,スウェーデン,1023,,26,スウェーデン,2510,42,,
12,フィリピン,10660,,21,フィリピン,636,38,,
38,カナダ,3699,,14,カナダ,3385,35,,
110,デンマーク,578,,49,デンマーク,1861,34,,
93,オーストリア,889,,39,オーストリア,5560,31,,
67,エクアドル,1702,,63,エクアドル,1173,29,,
36,イラク,3812,,37,イラク,346,29,,
81,ギリシャ,1074,,46,ギリシャ,821,22,,
13,エジプト,9698,,29,エジプト,456,21,,
32,アルジェリア,4258,,38,アルジェリア,302,21,,
187,サンマリノ,3,,52,サンマリノ,208,21,,
43,マレーシア,3239,,11,マレーシア,1796,19,,
60,ルーマニア,1952,,48,ルーマニア,906,17,,
37,ポーランド,3798,,82,ポーランド,1051,14,,
115,ノルウェー,532,,47,ノルウェー,2916,12,,
2,インド,133422,,22,インド,657,12,,
85,ドミニカ共和国,1027,,67,ドミニカ共和国,392,10,,
89,ハンガリー,978,,80,ハンガリー,226,10,,
119,アイルランド,489,,64,アイルランド,1564,9,,
44,ペルー,3216,,95,ペルー,480,9,,
53,オーストラリア,2517,,12,オーストラリア,2423,8,,
163,ルクセンブルク,60,,61,ルクセンブルク,1333,8,,
6,パキスタン,20096,,44,パキスタン,1063,8,,
124,パナマ,416,,109,パナマ,443,8,,
31,アルゼンチン,4456,,75,アルゼンチン,387,8,,
82,チェコ,1061,,65,チェコ,1654,6,,
108,レバノン,609,,32,レバノン,333,6,,
40,モロッコ,3522,,78,モロッコ,225,6,,
141,スロベニア,207,,83,スロベニア,528,5,,
11,メキシコ,12474,,59,メキシコ,405,5,,
75,チュニジア,1166,,79,チュニジア,173,5,,
133,アルバニア,287,,105,アルバニア,146,5,,
33,ウクライナ,4204,,77,ウクライナ,145,5,,
8,バングラデシュ,16488,,99,バングラデシュ,39,5,,
20,タイ,6779,,9,タイ,934,4,,
28,コロンビア,4983,,94,コロンビア,470,4,,
147,バーレーン,148,,34,バーレーン,419,4,,
99,香港,749,,2,香港,410,4,,
103,セルビア,699,,91,セルビア,384,4,,
135,リトアニア,281,,53,リトアニア,274,4,,
58,ブルキナファソ,1975,,106,ブルキナファソ,146,4,,
47,ガーナ,2956,,129,ガーナ,93,4,,
94,イスラエル,888,,31,イスラエル,2369,3,,
61,チリ,1875,,76,チリ,1142,3,,
113,フィンランド,551,,20,フィンランド,880,3,,
102,ブルガリア,700,,101,ブルガリア,242,3,,
,北マケドニア,207.7,,45,北マケドニア,177,3,,
130,ボスニア・ヘルツェゴビナ,350,,85,ボスニア・ヘルツェゴビナ,176,3,,
156,キプロス,86,,104,キプロス,132,3,,
101,パラグアイ,705,,98,パラグアイ,37,3,,
41,サウジアラビア,3341,,73,サウジアラビア,900,2,,
171,アイスランド,35,,55,アイスランド,737,2,,
112,シンガポール,564,,7,シンガポール,631,2,,
83,アラブ首長国連邦,1043,,19,アラブ首長国連邦,333,2,,
55,台湾,2359,,6,台湾,235,2,,
117,コスタリカ,502,,96,コスタリカ,201,2,,
87,アゼルバイジャン,994,,56,アゼルバイジャン,93,2,,
39,アフガニスタン,3602,,36,アフガニスタン,84,2,,
14,コンゴ民主共和国(旧ザイール),9503,,112,コンゴ民主共和国(旧ザイール),48,2,,
152,モーリシャス,127,,159,モーリシャス,48,2,,
9,ロシア,14680,,25,ロシア,651,1,,
125,クロアチア,409,,41,クロアチア,442,1,,
114,スロバキア,544,,92,スロバキア,216,1,,
,アンドラ,7.7,,69,アンドラ,188,1,,
128,モルドバ,354,,100,モルドバ,149,1,,
54,カメルーン,2488,,89,カメルーン,75,1,,
145,コソボ,179,,142,コソボ,63,1,,
,キューバ,1148,,120,キューバ,57,1,,
162,モンテネグロ,62,,153,モンテネグロ,52,1,,
7,ナイジェリア,19588,,54,ナイジェリア,46,1,,
134,ジャマイカ,286,,113,ジャマイカ,25,1,,
65,グアテマラ,1726,,126,グアテマラ,24,1,,
142,ガボン,205,,128,ガボン,6,1,,
,キュラソー,14.2,,139,キュラソー,6,1,,
159,ガイアナ,78,,116,ガイアナ,5,1,,
,ケイマン諸島(英領),5.4,,119,ケイマン諸島(英領),5,1,,
139,ガンビア,228,,158,ガンビア,3,1,,
70,ジンバブエ,1464,,170,ジンバブエ,3,1,,
34,スーダン,4199,,122,スーダン,3,1,,
,モントセラト(英領),0.6,,164,モントセラト(英領),1,1,,
24,南アフリカ,5794,,86,南アフリカ,709,0,,
136,カタール,272,,60,カタール,537,0,,
149,エストニア,132,,50,エストニア,404,0,,
132,アルメニア,297,,66,アルメニア,265,0,,
144,ラトビア,193,,71,ラトビア,221,0,,
118,ニュージーランド,493,,58,ニュージーランド,205,0,,
120,クウェート,457,,33,クウェート,195,0,,
129,ウルグアイ,351,,132,ウルグアイ,189,0,,
88,ヨルダン,990,,74,ヨルダン,172,0,,
15,ベトナム,9458,,10,ベトナム,141,0,,
166,マルタ,48,,97,マルタ,129,0,,
167,ブルネイ,44,,103,ブルネイ,109,0,,
57,スリランカ,2169,,18,スリランカ,102,0,,
123,オマーン,418,,35,オマーン,99,0,,
68,セネガル,1630,,72,セネガル,99,0,,
69,カンボジア,1625,,17,カンボジア,96,0,,
49,ベネズエラ,2886,,127,ベネズエラ,91,0,,
90,ベラルーシ,949,,57,ベラルーシ,86,0,,
63,カザフスタン,1840,,131,カザフスタン,81,0,,
52,コートジボワール,2561,,115,コートジボワール,80,0,,
127,ジョージア,373,,43,ジョージア,75,0,,
42,ウズベキスタン,3257,,146,ウズベキスタン,60,0,,
148,トリニダード・トバゴ,138,,121,トリニダード・トバゴ,60,0,,
,パレスチナ,505,,84,パレスチナ,60,0,,
,リヒテンシュタイン,3.9,,81,リヒテンシュタイン,51,0,,
107,キルギス,626,,155,キルギス,44,0,,
74,ルワンダ,1209,,137,ルワンダ,41,0,,
91,ホンジュラス,943,,111,ホンジュラス,36,0,,
78,ボリビア,1138,,110,ボリビア,32,0,,
,モナコ,3.9,,62,モナコ,31,0,,
160,マカオ,67,,3,マカオ,30,0,,
29,ケニア,4803,,125,ケニア,28,0,,
,ガーンジー(英領),6.6,,117,ガーンジー(英領),23,0,,
97,トーゴ,799,,90,トーゴ,23,0,,
,マン島(英王室属領),8,,174,マン島(英王室属領),23,0,,
51,マダガスカル,2633,,165,マダガスカル,19,0,,
172,バルバドス(英領),29,,154,バルバドス(英領),18,0,,
,ジャージー(英領),9.6,,118,ジャージー(英領),16,0,,
,ジブラルタル(英領),3.2,,87,ジブラルタル(英領),15,0,,
35,ウガンダ,3882,,175,ウガンダ,14,0,,
170,モルディブ,37,,102,モルディブ,13,0,,
,アルバ,10.3,,133,アルバ,12,0,,
16,エチオピア,9414,,124,エチオピア,12,0,,
64,ザンビア,1777,,156,ザンビア,12,0,,
25,タンザニア,5468,,149,タンザニア,12,0,,
154,ジブチ,105,,157,ジブチ,11,0,,
,ニューカレドニア,27.5,,176,ニューカレドニア,10,0,,
131,モンゴル,324,,108,モンゴル,10,0,,
104,エルサルバドル,664,,161,エルサルバドル,9,0,,
150,赤道ギニア,131,,147,赤道ギニア,9,0,,
164,スリナム,59,,140,スリナム,8,0,,
80,ハイチ,1112,,166,ハイチ,8,0,,
182,セーシェル,10,,135,セーシェル,7,0,,
184,ドミニカ国,7,,183,ドミニカ国,7,0,,
137,ナミビア,241,,134,ナミビア,7,0,,
56,ニジェール,2244,,168,ニジェール,7,0,,
,バミューダ(英領),6.5,,181,バミューダ(英領),6,0,,
76,ベナン,1149,,151,ベナン,6,0,,
,シリア,1795.2,,177,シリア,5,0,,
169,バハマ,38,,152,バハマ,5,0,,
155,フィジー,89,,160,フィジー,5,0,,
46,モザンビーク,3034,,178,モザンビーク,5,0,,
153,エスワティニ,110,,138,エスワティニ,4,0,,
109,エリトリア,605,,172,エリトリア,4,0,,
165,カーボヴェルデ,55,,171,カーボヴェルデ,4,0,,
71,ギニア,1329,,123,ギニア,4,0,,
122,コンゴ共和国,446,,143,コンゴ共和国,4,0,,
,バチカン,0.08,,93,バチカン,4,0,,
116,中央アフリカ,508,,145,中央アフリカ,4,0,,
48,アンゴラ,2925,,167,アンゴラ,3,0,,
183,アンティグア・バーブーダ,9,,130,アンティグア・バーブーダ,3,0,,
176,セントルシア,18,,136,セントルシア,3,0,,
73,チャド,1249,,162,チャド,3,0,,
50,ネパール,2809,,8,ネパール,3,0,,
26,ミャンマー,5283,,182,ミャンマー,3,0,,
100,ラオス,706,,184,ラオス,3,0,,
121,リベリア,446,,148,リベリア,3,0,,
146,ギニアビサウ,174,,186,ギニアビサウ,2,0,,
185,セントクリストファー・ネーヴィス,6,,188,セントクリストファー・ネーヴィス,2,0,,
106,ニカラグア,646,,163,ニカラグア,2,0,,
158,ブータン,82,,88,ブータン,2,0,,
62,マリ,1854,,187,マリ,2,0,,
126,モーリタニア,397,,141,モーリタニア,2,0,,
179,グレナダ,11,,179,グレナダ,1,0,,
178,セントビンセント・グレナディーン,11,,144,セントビンセント・グレナディーン,1,0,,
,ソマリア,1474,,150,ソマリア,1,0,,
,タークス・カイコス諸島(英領),3.1,,185,タークス・カイコス諸島(英領),1,0,,
,チャンネル諸島(英王室属領),16.4,,107,チャンネル諸島(英王室属領),1,0,,
96,パプアニューギニア,843,,169,パプアニューギニア,1,0,,
168,ベリーズ,40,,180,ベリーズ,1,0,,
105,リビア,651,,189,リビア,1,0,,
151,東ティモール,127,,173,東ティモール,1,0,,
45,イエメン,3082,,,イエメン,,,,
177,キリバス,12,,,キリバス,,,,
157,コモロ,85,,,コモロ,,,,
175,サモア,20,,,サモア,,,,
174,サントメ・プリンシペ,22,,,サントメ・プリンシペ,,,,
98,シエラレオネ,757,,,シエラレオネ,,,,
161,ソロモン諸島,63,,,,,,,*
92,タジキスタン,911,,,タジキスタン,,,,
190,ツバル,1,,,ツバル,,,,
111,トルクメニスタン,577,,,トルクメニスタン,,,,
181,トンガ,10,,,トンガ,,,,
189,ナウル,1,,,ナウル,,,,
173,バヌアツ,29,,,バヌアツ,,,,
188,パラオ,2,,,パラオ,,,,
79,ブルンジ,1119,,,ブルンジ,,,,
138,ボツワナ,234,,,ボツワナ,,,,
186,マーシャル,6,,,マーシャル,,,,
140,マケドニア,208,,,マケドニア,,,,
59,マラウイ,1972,,,マラウイ,,,,
180,ミクロネシア,10,,,ミクロネシア,,,,
143,レソト,203,,,レソト,,,,
72,南スーダン,1298,,,南スーダン,,,,
,その他,,,190,その他,712,10,,

■ 具体例3

 関数値を表示するグラフを描く例です。 別窓表示

リスト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
  <div style="height:560px; width:1000px; margin:0 auto; background:#eee;">
    <canvas id="ChartID"></canvas><br>
	<div> *当初(0-30日)の実効再生産数 Rt=1.2</div><br>
     <a href="https://uub.jp/cvd/cvd5.html">実効再生産数</a>: [直近区間(7日)の新規感染者数/その前区間(7日)の新規感染者数]^[平均世代時間:5日/報告区間間隔:7日]
  </div>
  <script>
    var pltlb = new Array(); 
	var plt01 = new Array();  var plt02 = new Array(); var plt03 = new Array();  
	var plt04 = new Array(); 
	var sedaikan = 5;  // 世代間隔 5日  
	var sedain1 = 6;   // 拡大前世代数 6x5=30日  
	var sedainmx = 19; // 最大表示世代繰り返し数+1 18x5=90日間   
	var y0 = 100;      // 感染者数の初期値
	var rep00 = 1.2; var yy00 = y0;    // 前世代の実効再生産数
	var rep01 = 1.05; var yy01 = y0;   // 新評価実効再生産数
	var rep02 = 0.9; var yy02 = y0;    // 新評価実効再生産数
	var rep03 = 0.8; var yy03 = y0;    // 新評価実効再生産数
	var rep04 = 0.7; var yy04 = y0;    // 新評価実効再生産数
	for ( i = 0; i<sedainmx; i++ ) {
      pltlb[i] = i * sedaikan ;
	    plt01[i] = yy01;
	    plt02[i] = yy02;
	    plt03[i] = yy03;
	    plt04[i] = yy04;
	  
	  if ( i < sedain1 ) {    // 拡大前世代の時 前実効再生産数適用
	    yy01 = yy01 * rep00;
	    yy02 = yy02 * rep00;
	    yy03 = yy03 * rep00;
	    yy04 = yy04 * rep00;
	  
	  } else {                // 拡大世代の時 新実効再生産数適用
	    yy01 = yy01 * rep01;
	    yy02 = yy02 * rep02;
	    yy03 = yy03 * rep03;
	    yy04 = yy04 * rep04;
	  }
	}
	var ctx = document.getElementById('ChartID').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',           // 折れ線グラフを指定
      data: {
        labels: pltlb,
        datasets: [{
            fill: false,      // 下方の塗りつぶしせず
			tension: 0.2,
			label: 'Rt='+ rep01, // rep01のケース
            data: plt01,
            backgroundColor: "rgba(251,55,193,0.4)"
          }, {
            fill: false,      // 下方の塗りつぶしせず
			tension: 0.2,
            label: 'Rt='+ rep02, // rep02のケース
            data: plt02,
            backgroundColor: "rgba(255,193,0,0.3)"
          }, {
     //       fill: false,    // 下方の塗りつぶしせず
			tension: 0.2,
            label: 'Rt='+ rep03, // rep03のケース
            data: plt03,
            backgroundColor: "rgba(53,155,251,0.3)"
          }, {
     //       fill: false,    // 下方の塗りつぶしせず
			tension: 0.2,
            label: 'Rt='+ rep04, // rep04のケース
            data: plt04,
            backgroundColor: "rgba(0,255,193,0.4)"
        }]
      },
      options: {
        title: {
          display: true,
          fontSize: 18,
          text: '新型コロナ陽性率シミュレーション (covid19)'
        },
        responsive: true,
        scales: {
            xAxes: [{
               display: true,
               scaleLabel: {
                  display: true,
                  labelString: '日数',
        //          fontFamily: 'monospace',
                  fontSize: 14
               },
               stacked: false,
               gridLines: {
                  display: false
               }
            }],
            yAxes: [{
        //       type: 'logarithmic',  // 対数軸
               ticks: {
                            min: 0,       // 軸の最小値
                  //          max: 100000,      // 軸の最大値
                 //           stepSize: 50   // 目盛り・補助線の間隔
               },
			   display: true,
               scaleLabel: {
                  display: true,
                  labelString: '感染者数',
        //          fontFamily: 'monospace',
                  fontSize: 14
               },
               ticks: {
                  callback: function(value){
                     return value; // return value+'℃';  //
                  }
               }
            }]
        }
      }
    });
  </script>
</body>
</html>

■ 参考サイト