chart.js で折れ線グラフ、棒グラフ、複合グラフを描いてみた

フロントエンド素人がおしゃれなグラフを描きたくchart.jsを使ってみた。
ソースコード一部だけのサイトが多かったため、グラフとソースコード全てを記載する。

グラフとソースコード

折れ線グラフ

Chart.js 入門より

<!DOCTYPE html>
<html lang=“ja”>
 <head>
  <meta http-equiv="content-language" content="ja">
  <meta name="robots" content="noindex,nofollow">
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

  <title>HTML Sample</title>
 </head>

 <body>
 <canvas id="myChart"></canvas>
 <script>
 var ctx = document.getElementById('myChart').getContext('2d');
 var chart = new Chart(ctx, {
    // 作成したいチャートのタイプ
    type: 'line',

    // データセットのデータ
    data: {
        labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        datasets: [{
            label: "初めてのデータセット",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },

    // ここに設定オプションを書きます
    options: {}
});
 </script>
 </body>
 
</html>

折れ線グラフ-その2

線グラフを参考に試してみた。

<!DOCTYPE html>
<html lang=“ja”>
 <head>
  <meta http-equiv="content-language" content="ja">
  <meta name="robots" content="noindex,nofollow">
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

  <title>HTML Sample</title>
 </head>

 <body>
 <canvas id="myChart"></canvas>
 <script>
 var ctx = document.getElementById('myChart').getContext('2d');
 var chart = new Chart(ctx, {
    // 作成したいチャートのタイプ
    type: 'line',

    // データセットのデータ
    data: {
        labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        datasets: [{
            label: "データ-1",
            borderColor: 'rgb(255, 99, 132)',
            // 線の幅(ピクセル単位)
            borderWidth: 2,
            // 線のベジェ曲線の張力。直線を描くには0に設定する。
            lineTension: 0.5,
            // 点の形状の半径。0に設定すると、点はレンダリングされない。
            pointRadius: 3,
            // マウスオーバー検出のために点半径に追加される半径(ピクセル単位)
            pointHitRadius: 3,
            // 線の下を埋めるかどうか
            fill: false,
            data: [0, 10, 5, 2, 20, 30, 45]
        },
        {
            label: "データ-2",
            borderColor: 'rgb(99, 255, 132)',
            // 線の幅(ピクセル単位)
            borderWidth: 2,
            // 線のベジェ曲線の張力。直線を描くには0に設定する。
            lineTension: 0.5,
            // 点の形状の半径。0に設定すると、点はレンダリングされない。
            pointRadius: 3,
            // マウスオーバー検出のために点半径に追加される半径(ピクセル単位)
            pointHitRadius: 3,
            // 線の下を埋めるかどうか
            fill: false,
            data: [10, 11, 7, 9, 21, 3],
        }]
    },

    // ここに設定オプションを書きます
    options: {}
});
 </script>
 </body>
 
</html>

棒グラフ

Chart.js – 使用方法より

<!DOCTYPE html>
<html lang=“ja”>
 <head>
  <meta http-equiv="content-language" content="ja">
  <meta name="robots" content="noindex,nofollow">
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

  <title>HTML Sample</title>
 </head>

 <body>
    <canvas id="myChart" width="400" height="300"></canvas>

<script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["赤", "青", "黄", "緑", "紫", "橙"],
            datasets: [{
                label: '得票数',
                data: [8, 9, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
    </script> 
</body>

</html>

棒グラフ-その2

棒グラフを参考に試してみた。

<!DOCTYPE html>
<html lang=“ja”>
 <head>
  <meta http-equiv="content-language" content="ja">
  <meta name="robots" content="noindex,nofollow">
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

  <title>HTML Sample</title>
 </head>

 <body>
    <canvas id="myChart" width="400" height="300"></canvas>

<script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
            datasets: [{
                label: 'データ1',
                data: [8, 9, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(54, 162, 235, 0.2)'
                ],
                borderColor: [
                    'rgba(54, 162, 235, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(54, 162, 235, 1)'
                ],
                // バーの境界線の太さ(ピクセル単位)
                borderWidth: 1,
                // データセットが属するグループのID
                stack: 1
            },
            {
                label: 'データ2',
                data: [1, 2, 4, 2, 1, 5],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(255, 99, 132, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(255,99,132,1)',
                    'rgba(255,99,132,1)',
                    'rgba(255,99,132,1)',
                    'rgba(255,99,132,1)',
                    'rgba(255,99,132,1)'
                ],
                // バーの境界線の太さ(ピクセル単位)
                borderWidth: 1,
                // データセットが属するグループのID
                stack: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    },
                    stacked: true
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }
    });
    </script> 
</body>

</html>

複合グラフ

折れ線グラフと棒グラフを合わせてみた。

<!DOCTYPE html>
<html lang=“ja”>

<head>
    <meta http-equiv="content-language" content="ja">
    <meta name="robots" content="noindex,nofollow">
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

    <title>HTML Sample</title>
</head>

<body>
    <canvas id="myChart" width="400" height="300"></canvas>

    <script>
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
                datasets: [{
                    type: 'bar',
                    label: 'データ1',
                    data: [8, 9, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(54, 162, 235, 0.2)'
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(54, 162, 235, 1)'
                    ],
                    // バーの境界線の太さ(ピクセル単位)
                    borderWidth: 1,
                    // データセットが属するグループのID
                    stack: 1
                },
                {
                    type: 'bar',
                    label: 'データ2',
                    data: [1, 2, 4, 2, 1, 5],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(255,99,132,1)',
                        'rgba(255,99,132,1)',
                        'rgba(255,99,132,1)',
                        'rgba(255,99,132,1)',
                        'rgba(255,99,132,1)'
                    ],
                    // バーの境界線の太さ(ピクセル単位)
                    borderWidth: 1,
                    // データセットが属するグループのID
                    stack: 1
                },
                {
                    type: 'line',
                    label: "データ3",
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    // 線の幅(ピクセル単位)
                    borderWidth: 2,
                    // 線のベジェ曲線の張力。直線を描くには0に設定する。
                    lineTension: 0.5,
                    // 点の形状の半径。0に設定すると、点はレンダリングされない。
                    pointRadius: 3,
                    // マウスオーバー検出のために点半径に追加される半径(ピクセル単位)
                    pointHitRadius: 3,
                    // 線の下を埋めるかどうか
                    fill: false,
                    data: [5, 10, 5, 9, 20, 30],
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        },
                        stacked: true
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
            }
        });
    </script>
</body>

</html>

補足-開発環境

いちいちタグを書くのが辛かったため、エディタを探した。
Visual Studio Codeなるものをインストール。
Visual Studio Codeの使い方、基本の「キ」によると
・Microsoftが提供するクロスプラットフォームな高機能で軽量なエディタ(いろいろできるがIDEではない)
・デバッグ機能あり、多数の言語をサポート、Git連携、IntelliSense(自動補完システム)
・コマンドプロンプトで「code」で起動
らしい。

参考

chart.js入門 – サーバサイドについても記載されている
chart.js で複数軸の複合グラフを描く