2011|08|
2013|10|11|12|
2014|01|02|03|04|05|06|07|08|09|10|11|12|
2015|01|02|03|05|06|07|08|09|10|11|12|
2016|01|03|04|05|06|07|08|09|10|11|12|
2017|01|02|03|04|05|06|07|08|09|10|11|12|
2018|01|02|03|04|05|06|07|08|09|10|11|12|
2019|01|02|03|04|05|06|07|08|09|10|11|12|
2020|01|02|03|04|

2019-05-26 2秒単位で更新される鶏頭図のグラフ [長年日記]

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <SCRIPT LANGUAGE="JavaScript">
	<!--
		setTimeout("location.reload()",1000*5);  // 5秒
		//-->
  </SCRIPT>
  <title>グラフ</title> 
</head>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
 
 
<body>
    <h1>鶏頭図</h1>
    <canvas id="myPolarAreaChart"></canvas> 
    <canvas id="myPolarAreaChart2"></canvas> 
 
    <script>
    var ctx = document.getElementById("myPolarAreaChart");
    var myPolarAreaChart = new Chart(ctx, {
        type: 'polarArea',
            data: {
                labels: ["1月", "2月", "3月", "4月","5月"],
                datasets: [{
                    backgroundColor: [
                    "#800080", //パープル
                    "#FF1493", //ディープピンク
                    "#FF0000", //レッド
                    "#FF8C00", //ダークオレンジ
                    "#FFD700" //ゴールド
                    ], 
                    data: [18, 17, 12, 10, 3]
                }]
            },  
        options: {
	        animation:false, // アニメーションの停止
            title: {
                display: true,
                text: '月別 クラス病欠者数'
            }
        }
    });
    </script>
 
    <script>
    var ctx2 = document.getElementById("myPolarAreaChart2");
    var myPolarAreaChart2 = new Chart(ctx2, {
        type: 'polarArea',
            data: {
                labels: ["1月", "2月", "3月", "4月","5月"],
                datasets: [{
                    backgroundColor: [
                    "#800080", //パープル
                    "#FF1493", //ディープピンク
                    "#FF0000", //レッド
                    "#FF8C00", //ダークオレンジ
                    "#FFD700" //ゴールド
                    ], 
                    data: [18, 17, 12, 10, 3]
                }]
            },  
        options: {
	        animation:false, // アニメーションの停止
            title: {
                display: true,
                text: '月別 クラス病欠者数'
            }
        }
    });
    </script>
 
 
</body>
</html>
syntax2html