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