ããã«ã¡ã¯ãæ°å2幎ç®ã®y_kwmtã§ããä»åã¯æ¥åã§åãæ±ã£ãŠããChart.jsã«ã€ããŠå°ãåŠç¿ããã®ã§ã 玹ä»ããŠãããããšæããŸãã Chart.jsãšã¯ æãç·ã°ã©ããæç»ãã æ£ã°ã©ããæç»ãã ãããã« åèã«ãããµã€ã Chart.jsãšã¯ ã°ã©ããç°¡åã«æãããšãã§ãã Javascript ã®ã©ã€ãã©ãªã§ãã ã°ã©ã㯠HTML5 ã® Canvas ã䜿ã£ãŠæç»ããããšãã§ããŸãã æç»ã§ããã°ã©ãäžèЧ æãç·ã°ã©ã æ£ã°ã©ã ã¬ãŒããŒãã£ãŒã åã°ã©ã æ£åžå³ å
¬åŒãµã€ã www.chartjs.org å
¬åŒããã¥ã¡ã³ã www.chartjs.org æãç·ã°ã©ããæç»ãã 1/27ïœ2/2ã®å€§éªã®äºæ³æé«æ°æž©ãšäºæ³æäœæ°æž©ãã°ã©ãã«ãŸãšããŠã¿ãŸããã 以äžã¯ ãœãŒã¹ã³ãŒã ãšå®éã«è¡šç€ºãããç»é¢ã§ãã <!DOCTYPE html> < html lang = "ja" > < head > < meta charset = "utf-8" > ã < title > ã°ã©ã </ title > </ head > < body > < h1 > æãç·ã°ã©ã </ h1 > < canvas id = "graph" ></ canvas > < script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js" ></ script > <!-- Chart.jsèªã¿èŸŒã¿ --> < script > var ctx = document .getElementById ( "graph" ) ; var myLineChart = new Chart ( ctx, { type: 'line' , // 衚瀺ããã°ã©ãã®ã¿ã€ã data: { labels: [ '1æ27æ¥' , '1æ28æ¥' , '1æ29æ¥' , '1æ30æ¥' , '1æ31æ¥' , '2æ1æ¥' , '2æ2æ¥' ] , // 暪軞 datasets: [ { label: 'æé«æ°æž©' , // å¡äŸ data: [ 11 , 17 , 14 , 12 , 9 , 10 , 11 ] , borderColor: "rgba(255,0,0,1)" , // ã°ã©ãã®è² backgroundColor: "rgba(0,0,0,0)" // å¡ãã€ã¶ããªã } , { label: 'æäœæ°æž©' , // å¡äŸ data: [ 9 , 10 , 7 , 6 , 4 , 3 , 4 ] , borderColor: "rgba(0,0,255,1)" , // ã°ã©ãã®è² backgroundColor: "rgba(0,0,0,0)" // å¡ãã€ã¶ããªã } ] , } , options: { title: { display: true , text: 'æ°æž©ïŒ1æ27æ¥~2æ2æ¥ïŒ' // ã¿ã€ãã« } , elements: { line: { tension: 0 , // ããžã§æ²ç·ãç¡å¹ã«ãã } } , scales: { // 軞èšå® yAxes: [{ // y軞èšå® ticks: { suggestedMax: 20 , // æé«å€ suggestedMin: 0 , // æäœå€ stepSize: 5 , // éé callback: function ( value, index, values ) { return value + '床' } } }] } , } } ) ; </ script > </ body > </ html > æ£ã°ã©ããæç»ãã æ¶ç©ºã®åºã®å£²ãäžããã°ã©ãã«ãŸãšããŠã¿ãŸããã 以äžã¯ ãœãŒã¹ã³ãŒã ãšå®éã«è¡šç€ºãããç»é¢ã§ãã <!DOCTYPE html> < html lang = "ja" > < head > < meta charset = "utf-8" > </ head > < body > < h1 > æ£ã°ã©ã </ h1 > < canvas id = "graph" ></ canvas > < script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js" ></ script > <!-- Chart.jsèªã¿èŸŒã¿ --> < script > var ctx = document .getElementById ( "graph" ) ; var myLineChart = new Chart ( ctx, { type: 'bar' , // 衚瀺ããã°ã©ãã®ã¿ã€ã data: { labels: [ '1æ27æ¥' , '1æ28æ¥' , '1æ29æ¥' , '1æ30æ¥' , '1æ31æ¥' , '2æ1æ¥' , '2æ2æ¥' ] , // 暪軞 datasets: [ { label: 'Aåº å£²äžé«' , // å¡äŸ data: [ 200 , 190 , 160 , 195 , 215 , 180 , 170 ] , backgroundColor: "rgba(255,255,102,1)" // ã°ã©ãã®å¡ãã€ã¶ã } , { label: 'Båº å£²äžé«' , // å¡äŸ data: [ 160 , 150 , 130 , 170 , 155 , 140 , 170 ] , backgroundColor: "rgba(102,255,204,1)" // ã°ã©ãã®å¡ãã€ã¶ã } , { label: 'Cåº å£²äžé«' , // å¡äŸ data: [ 120 , 130 , 135 , 115 , 150 , 130 , 120 ] , backgroundColor: "rgba(102,204,255,1)" // ã°ã©ãã®å¡ãã€ã¶ã } ] } , options: { title: { display: true , text: 'æ¯åºå¥ 売äžé«' // ã¿ã€ãã« } , scales: { // 軞èšå® yAxes: [{ // y軞èšå® ticks: { suggestedMax: 240 , // æé«å€ suggestedMin: 100 , // æäœå€ stepSize: 30 , // éé callback: function ( value, index, values ) { return value + 'äžå' } } }] } , } } ) ; </ script > </ body > </ html > ãããã« ä»åã¯Chart.jsã«ã€ããŠç޹ä»ãããŠããã ããŸããã åŠç¿ãè³æäœæã®æéãããŸããšãããšãã§ãããä»åã¯æãç·ã°ã©ããšæ£ã°ã©ãã®ã¿ã®ç޹ä»ãšãªããŸããã æ¬¡åã¯ã°ã©ãã®è¡šç€ºé衚瀺ã®åãæ¿ããªã©ã°ã©ãã«å¯Ÿããæäœãããããšæã£ãŠããŸãã åèã«ãããµã€ã liginc.co.jp qiita.com