Chart.js を使う

<!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から２次元連想配列に変換
    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 'ＭＳ 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: [             // Ｙ軸の設定
                    {
                        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,,

<!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>

■ Chart.js の利用準備

■ Chart.js (ver.3x) の利用方法

■ script の記述例 (ver.3.x)

■ Chart v.3 の具体例

■ 具体例１ (ver.2.5)

■ 具体例２ (ver.2.8)

■ 具体例３ (ver.2.5)

■ 参考サイト