【コピペ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種類のチャート/グラフについて、サンプルを紹介しました。

今回紹介したものはシンプルで簡単なものですが、十分利用しやすいと思います。

チャートやグラフを作成する際は是非ご利用ください。

まろりかモンスター

パソコンだいすき♡ 雑記ブログです！

【コピペOK】無料JavaScriptライブラリで作成する8種類のチャート/グラフ【Chart.js】

Chart.jsで利用できる8種類のチャート/グラフ

線グラフ

棒グラフ

レーダーチャート

ドーナツチャート

円グラフ

鶏頭図（けいとうず）

散布図

バブルチャート

おわりに