ã¾ã‚ã‚Šã‹ãƒ¢ãƒ³ã‚¹ã‚¿ãƒ¼

ãƒ‘ã‚½ã‚³ãƒ³ã ã„ã™ãâ™¡ é›‘è¨˜ãƒ–ãƒã‚°ã§ã™ï¼

ã€ã‚³ãƒ”ãƒšOKã€‘ç„¡æ–™JavaScriptãƒ©ã‚¤ãƒ–ãƒ©ãƒªã§ä½œæˆã™ã‚‹8ç¨®é¡žã®ãƒãƒ£ãƒ¼ãƒˆ/ã‚°ãƒ©ãƒ•ã€Chart.jsã€‘

ãƒãƒ£ãƒ¼ãƒˆ ãƒ–ãƒã‚¬ãƒ¼å‘ã‘

ã‚¹ãƒãƒ³ã‚µãƒ¼ãƒªãƒ³ã‚¯

f:id:marorika:20180330010753p:plain

JavaScriptãƒ©ã‚¤ãƒ–ãƒ©ãƒªã®Chart.jsã§ã¯8ç¨®é¡žã®ãƒãƒ£ãƒ¼ãƒˆ/ã‚°ãƒ©ãƒ•ã‚’ä½œæˆã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚

ãã‚Œãžã‚Œã®ãƒãƒ£ãƒ¼ãƒˆ/ã‚°ãƒ©ãƒ•ã«ã¤ã„ã¦ã€ç°¡å˜ãªã‚µãƒ³ãƒ—ãƒ«ã‚³ãƒ¼ãƒ‰ãŒã¾ã¨ã¾ã£ã¦ã„ã‚‹ã¨ä½¿ã„ã‚„ã™ã„ã¨æ€ã£ãŸã®ã§ã¾ã¨ã‚ã¾ã—ãŸã€‚

ãƒãƒ£ãƒ¼ãƒˆ/ã‚°ãƒ©ãƒ•ã‚’ä½œæˆã§ãã‚‹JavaScritpãƒ©ã‚¤ãƒ–ãƒ©ãƒªã§ã€ã©ã‚Œã‚’ä½¿ãŠã†ã‹é¸å®šã—ã¦ã„ã‚‹äººã«ã‚‚å‚è€ƒã«ãªã‚Œã°ã¨æ€ã„ã¾ã™ã€‚

www.marorika.com

Chart.jsã§åˆ©ç”¨ã§ãã‚‹8ç¨®é¡žã®ãƒãƒ£ãƒ¼ãƒˆ/ã‚°ãƒ©ãƒ•

Chart.jsã§ã¯8ç¨®é¡žã®ãƒãƒ£ãƒ¼ãƒˆ/ã‚°ãƒ©ãƒ•ã‚’ä½œæˆã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚

8ç¨®é¡žã®ãƒãƒ£ãƒ¼ãƒˆ/ã‚°ãƒ©ãƒ•

ç·šã‚°ãƒ©ãƒ•
æ£’ã‚°ãƒ©ãƒ•
ãƒ¬ãƒ¼ãƒ€ãƒ¼ãƒãƒ£ãƒ¼ãƒˆ
ãƒ‰ãƒ¼ãƒŠãƒ„ãƒãƒ£ãƒ¼ãƒˆ
å††ã‚°ãƒ©ãƒ•
é¶é å›³ï¼ˆã‘ã„ã¨ã†ãšï¼‰
æ•£å¸ƒå›³
ãƒãƒ–ãƒ«ãƒãƒ£ãƒ¼ãƒˆ

ãã‚Œãžã‚Œå®Ÿéš›ã®ã‚°ãƒ©ãƒ•ã¨ã€ã‚°ãƒ©ãƒ•ã‚’ä½œæˆã—ãŸJavaScriptã®ã‚³ãƒ¼ãƒ‰ã‚’æŽ²è¼‰ã—ã¦ã„ãã¾ã™ã€‚

ãªãŠã‚‚ã¡ã‚ã‚“ã€æŽ²è¼‰ã—ãŸã‚µãƒ³ãƒ—ãƒ«ã‚³ãƒ¼ãƒ‰ã¯å¿…è¦ã«å¿œã˜ã¦ã‚³ãƒ”ãƒšã—ã¦åˆ©ç”¨ã„ãŸã ã„ã¦ã‹ã¾ã„ã¾ã›ã‚“ã€‚

www.marorika.com

ç·šã‚°ãƒ©ãƒ•

ã‚µãƒ³ãƒ—ãƒ«ã‚³ãƒ¼ãƒ‰ã‚’è¡¨ç¤º

File: chart-js-line.html ------------------------ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <canvas id="myLine" style="width: 100%; height: 300px;"></canvas> <script> var ctx = document.getElementById("myLine"); var myLine = new Chart(ctx, { type: 'line', // ãƒãƒ£ãƒ¼ãƒˆã®ã‚¿ã‚¤ãƒ— data: { // ãƒãƒ£ãƒ¼ãƒˆã®å†…å®¹ labels: ["one", "two", "three", "four", "five", "six"], datasets: [{ label: 'red', lineTension: 0, // ãƒ™ã‚¸ã‚§æ›²ç·šã‚’ç„¡åŠ¹åŒ– data: [12, 19, 3, 5, 2, 3], backgroundColor: 'RGBA(182,39,93, 0.4)', borderColor: 'RGBA(182,39,93, 1)', borderWidth: 1 }, { label: 'green', data: [10, 14, 6, 8, 1, 4], backgroundColor: 'RGBA(77,169,155, 0.4)', borderColor: 'RGBA(77,169,155, 1)', borderWidth: 1 }] }, options: { // ãƒãƒ£ãƒ¼ãƒˆã®ãã®ä»–ã‚ªãƒ—ã‚·ãƒ§ãƒ³ scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); </script>

æ£’ã‚°ãƒ©ãƒ•

ã‚µãƒ³ãƒ—ãƒ«ã‚³ãƒ¼ãƒ‰ã‚’è¡¨ç¤º

File: chart-js-bar.html ----------------------- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <canvas id="myBar" style="width: 100%; height: 300px;"></canvas> <script> var myBarElement = document.getElementById("myBar"); var myBar = new Chart(myBarElement, { type: 'bar', // ãƒãƒ£ãƒ¼ãƒˆã®ã‚¿ã‚¤ãƒ— data: { // ãƒãƒ£ãƒ¼ãƒˆã®å†…å®¹ labels: ["one", "two", "three", "four", "five", "six"], datasets: [{ label: 'red', data: [12, 19, 3, 5, 2, 3], backgroundColor: 'RGBA(182,39,93, 0.4)', borderColor: 'RGBA(182,39,93, 1)', borderWidth: 1 }, { label: 'green', data: [10, 14, 6, 8, 1, 4], backgroundColor: 'RGBA(77,169,155, 0.4)', borderColor: 'RGBA(77,169,155, 1)', borderWidth: 1 }] }, options: { // ãƒãƒ£ãƒ¼ãƒˆã®ãã®ä»–ã‚ªãƒ—ã‚·ãƒ§ãƒ³ scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); </script>

ãƒ¬ãƒ¼ãƒ€ãƒ¼ãƒãƒ£ãƒ¼ãƒˆ

ã‚µãƒ³ãƒ—ãƒ«ã‚³ãƒ¼ãƒ‰ã‚’è¡¨ç¤º

File: chart-js-radar.html ------------------------- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <canvas id="myRadar" style="width: 100%; height: 300px;"></canvas> <script> var myRadarElement = document.getElementById("myRadar"); var myRadar = new Chart(myRadarElement, { type: 'radar', // ãƒãƒ£ãƒ¼ãƒˆã®ã‚¿ã‚¤ãƒ— data: { // ãƒãƒ£ãƒ¼ãƒˆã®å†…å®¹ labels: ["one", "two", "three", "four", "five", "six"], datasets: [{ label: 'red', lineTension: 0, // ãƒ™ã‚¸ã‚§æ›²ç·šã‚’ç„¡åŠ¹åŒ– data: [12, 19, 3, 5, 2, 3], backgroundColor: 'RGBA(182,39,93, 0.4)', borderColor: 'RGBA(182,39,93, 1)', borderWidth: 1, pointBackgroundColor: 'RGBA(46,106,177,1)' }, { label: 'green', data: [10, 14, 6, 8, 1, 4], backgroundColor: 'RGBA(77,169,155, 0.4)', borderColor: 'RGBA(77,169,155, 1)', borderWidth: 1, pointBackgroundColor: 'RGBA(46,106,177,1)' }] }, options: { // ãƒãƒ£ãƒ¼ãƒˆã®ãã®ä»–ã‚ªãƒ—ã‚·ãƒ§ãƒ³ // è¨å®šãªã— } }); </script>

ãƒ‰ãƒ¼ãƒŠãƒ„ãƒãƒ£ãƒ¼ãƒˆ

ã‚µãƒ³ãƒ—ãƒ«ã‚³ãƒ¼ãƒ‰ã‚’è¡¨ç¤º

File: chart-js-doughnut.html ---------------------------- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <canvas id="myDoughnut" style="width: 100%; height: 300px;"></canvas> <script> var myDoughnutElement = document.getElementById("myDoughnut"); var myDoughnut = new Chart(myDoughnutElement, { type: 'doughnut', // ãƒãƒ£ãƒ¼ãƒˆã®ã‚¿ã‚¤ãƒ— data: { // ãƒãƒ£ãƒ¼ãƒˆã®å†…å®¹ labels: ["one", "two", "three"], datasets: [{ label: 'doughnut', lineTension: 0, // ãƒ™ã‚¸ã‚§æ›²ç·šã‚’ç„¡åŠ¹åŒ– data: [14, 10, 6], backgroundColor: ['RGBA(182,39,93, 1)', 'RGBA(77,169,155, 1)', 'RGBA(46,106,177,1)'], borderWidth: 5 }] }, options: { // ãƒãƒ£ãƒ¼ãƒˆã®ãã®ä»–ã‚ªãƒ—ã‚·ãƒ§ãƒ³ // è¨å®šãªã— } }); </script>

å††ã‚°ãƒ©ãƒ•

ã‚µãƒ³ãƒ—ãƒ«ã‚³ãƒ¼ãƒ‰ã‚’è¡¨ç¤º

File: chart-js-pie.html ----------------------- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <canvas id="myPie" style="width: 100%; height: 300px;"></canvas> <script> var myPieElement = document.getElementById("myPie"); var myPie = new Chart(myPieElement, { type: 'pie', // ãƒãƒ£ãƒ¼ãƒˆã®ã‚¿ã‚¤ãƒ— data: { // ãƒãƒ£ãƒ¼ãƒˆã®å†…å®¹ labels: ["one", "two", "three"], datasets: [{ label: 'pie', lineTension: 0, // ãƒ™ã‚¸ã‚§æ›²ç·šã‚’ç„¡åŠ¹åŒ– data: [14, 10, 6], backgroundColor: ['RGBA(182,39,93, 1)', 'RGBA(77,169,155, 1)', 'RGBA(46,106,177,1)'], borderWidth: 5 }] }, options: { // ãƒãƒ£ãƒ¼ãƒˆã®ãã®ä»–ã‚ªãƒ—ã‚·ãƒ§ãƒ³ // è¨å®šãªã— } }); </script>

é¶é å›³ï¼ˆã‘ã„ã¨ã†ãšï¼‰

ã‚µãƒ³ãƒ—ãƒ«ã‚³ãƒ¼ãƒ‰ã‚’è¡¨ç¤º

File: chart-js-polar-area.html ------------------------------ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <canvas id="myPolarArea" style="width: 100%; height: 300px;"></canvas> <script> var myPolarAreaElement = document.getElementById("myPolarArea"); var myPolarArea = new Chart(myPolarAreaElement, { type: 'polarArea', // ãƒãƒ£ãƒ¼ãƒˆã®ã‚¿ã‚¤ãƒ— data: { // ãƒãƒ£ãƒ¼ãƒˆã®å†…å®¹ labels: ["one", "two", "three"], datasets: [{ label: 'polarArea', lineTension: 0, // ãƒ™ã‚¸ã‚§æ›²ç·šã‚’ç„¡åŠ¹åŒ– data: [14, 4, 9], backgroundColor: ['RGBA(182,39,93, 1)', 'RGBA(77,169,155, 1)', 'RGBA(46,106,177,1)'], borderWidth: 5 }] }, options: { // ãƒãƒ£ãƒ¼ãƒˆã®ãã®ä»–ã‚ªãƒ—ã‚·ãƒ§ãƒ³ // è¨å®šãªã— } }); </script>

æ•£å¸ƒå›³

ã‚µãƒ³ãƒ—ãƒ«ã‚³ãƒ¼ãƒ‰ã‚’è¡¨ç¤º

File: chart-js-scatter.html --------------------------- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <canvas id="myScatter" style="width: 100%; height: 300px;"></canvas> <script> var myScatterElement = document.getElementById("myScatter"); var myScatter = new Chart(myScatterElement, { type: 'scatter', // ãƒãƒ£ãƒ¼ãƒˆã®ã‚¿ã‚¤ãƒ— data: { // ãƒãƒ£ãƒ¼ãƒˆã®å†…å®¹ datasets: [{ label: 'red', data: [{x:4, y:5}, {x:5, y:9}], backgroundColor: 'RGBA(182,39,93, 0.4)', borderColor: 'RGBA(182,39,93, 1)', borderWidth: 1 }, { label: 'green', data: [{x:8, y:4}, {x:2, y:4}], backgroundColor: 'RGBA(77,169,155, 0.4)', borderColor: 'RGBA(77,169,155, 1)', borderWidth: 1 }] }, options: { // ãƒãƒ£ãƒ¼ãƒˆã®ãã®ä»–ã‚ªãƒ—ã‚·ãƒ§ãƒ³ scales: { xAxes: [{ ticks: { max: 10, min: 0 } }], yAxes: [{ ticks: { max: 10, min: 0 } }] } } }); </script>

ãƒãƒ–ãƒ«ãƒãƒ£ãƒ¼ãƒˆ

ã‚µãƒ³ãƒ—ãƒ«ã‚³ãƒ¼ãƒ‰ã‚’è¡¨ç¤º

File: chart-js-bubble.html -------------------------- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <canvas id="myBubble" style="width: 100%; height: 300px;"></canvas> <script> var myBubbleElement = document.getElementById("myBubble"); var myBubble = new Chart(myBubbleElement, { type: 'bubble', // ãƒãƒ£ãƒ¼ãƒˆã®ã‚¿ã‚¤ãƒ— data: { // ãƒãƒ£ãƒ¼ãƒˆã®å†…å®¹ datasets: [{ label: 'red', data: [{x:4, y:5}, {x:5, y:9, r:10}], backgroundColor: 'RGBA(182,39,93, 0.4)', borderColor: 'RGBA(182,39,93, 1)', borderWidth: 1 }, { label: 'green', data: [{x:8, y:4}, {x:2, y:4, r:20}], backgroundColor: 'RGBA(77,169,155, 0.4)', borderColor: 'RGBA(77,169,155, 1)', borderWidth: 1 }] }, options: { // ãƒãƒ£ãƒ¼ãƒˆã®ãã®ä»–ã‚ªãƒ—ã‚·ãƒ§ãƒ³ scales: { xAxes: [{ ticks: { max: 10, min: 0 } }], yAxes: [{ ticks: { max: 10, min: 0 } }] } } }); </script>

ãŠã‚ã‚Šã«

Chart.jsã§ä½¿ãˆã‚‹8ç¨®é¡žã®ãƒãƒ£ãƒ¼ãƒˆ/ã‚°ãƒ©ãƒ•ã«ã¤ã„ã¦ã€ã‚µãƒ³ãƒ—ãƒ«ã‚’ç´¹ä»‹ã—ã¾ã—ãŸã€‚

ä»Šå›žç´¹ä»‹ã—ãŸã‚‚ã®ã¯ã‚·ãƒ³ãƒ—ãƒ«ã§ç°¡å˜ãªã‚‚ã®ã§ã™ãŒã€ ååˆ†åˆ©ç”¨ã—ã‚„ã™ã„ã¨æ€ã„ã¾ã™ã€‚

ãƒãƒ£ãƒ¼ãƒˆã‚„ã‚°ãƒ©ãƒ•ã‚’ä½œæˆã™ã‚‹éš›ã¯æ˜¯éžã”åˆ©ç”¨ãã ã•ã„ã€‚

ãƒ—ãƒ©ã‚¤ãƒã‚·ãƒ¼ãƒãƒªã‚·ãƒ¼ | ãŠå•ã„åˆã‚ã›