MENU
まろりか
昔から何かを作るのが好きで、趣味の延長で当サイトの運営に至っています。普段はIT会社でプロジェクトマネージャーとして奮闘中ですが、プラベートで当サイトを運営しています。

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

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

JavaScriptライブラリのChart.jsでは8種類のチャート/グラフを作成することができます。

それぞれのチャート/グラフについて、簡単なサンプルコードがまとまっていると使いやすいと思ったのでまとめました。

チャート/グラフを作成できるJavaScritpライブラリで、どれを使おうか選定している人にも参考になればと思います。

https://www.marorika.com/entry/chart-js-library/

目次

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

Chart.jsでは8種類のチャート/グラフを作成することができます。

8種類のチャート/グラフ

  • 線グラフ
  • 棒グラフ
  • レーダーチャート
  • ドーナツチャート
  • 円グラフ
  • 鶏頭図(けいとうず)
  • 散布図
  • バブルチャート

それぞれ実際のグラフと、グラフを作成したJavaScriptのコードを掲載していきます。

なおもちろん、掲載したサンプルコードは必要に応じてコピペして利用いただいてかまいません。

[marocard url=”https://www.marorika.com/entry/setting-chart-js/”]

線グラフ




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

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

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

目次
閉じる