• HOME
• Node.js
• Chart.jsを使ってWeb画面にグラフを描画する

Chart.jsを使ってWeb画面にグラフを描画する

Tweet

Chart.jsを使って、Web画面にグラフを描画する方法です。
今回は、Node.jsで動作させます。

インストール

npm install chart.js -D

1. node_modules/chart.js/distから次のファイルをクライアントが見える位置にコピーする
   • chart.umd.js
   • chart.umd.js.map
   本記事ではpublic/jsにコピーする
2. ビューのファイルから、スクリプトファイルを読み込む

    <script src="/js/chart.umd.js""></script>
   

3. 以下の構文で、キャンバスにグラフを描画する

    new Chart(キャンバスエレメント、コンフィグ);
   

   サンプル。 configの内容については後述。

    const myChart = document.getElementById('myChart');
    new Chart(myChart, config);
   

コンフィグ

コンフィグには以下の内容を記載する。

const config = {
    type: グラフ種別,
    data: データ,
    options: オプション
}

• type - グラフの種別を指定する
• data - グラフのデータを指定する。複数のデータセットを指定可能
• options - オプション。以下の指定が可能
  • responsive - レスポンシブ指定
  • maintainAspectRatio - アスペクト比をキープするかどうか。横幅のみレスポンシブにしたい場合はfalseを指定する
  • scales - y軸に情報を指定する
  • plugins - プラグイン情報を指定する
    • title - グラフのタイトル情報
    • legend - グラフの凡例情報

各項目の詳細は、Chart.js Samplesにあります

data

dataにはグラフのデータを格納します。

• labels - X軸の目盛りラベル配列
• datasets - データ系列の配列

const data = {
    labels: [1, 2, 3, 4, 5, 6],
    datasets: []
};

data.datasets

• label - データ名
• data - 値の配列。データがない場合はundefinedを指定する
• borderWidth - 線の幅
• borderColor - 線の色
• backgroundColor - プロットする点の背景。配列で指定して各値ごとに色を指定も可能

data.datasets.push({
    label: 'dataset1',
    data: [20, 40, 60, 80, 100, 90],
    borderWidth: 1,
    borderColor: 'rgb(255, 99, 132)',
    backgroundColor: 'rgba(255, 99, 132, .5)',
});

データなしを含む場合

data.datasets.push({
    label: 'dataset2',
    data: [undefined, 20, 5, 90, 60, 110],
    borderWidth: 1,
    borderColor: 'rgb(54, 162, 235)',
    backgroundColor: 'rgba(54, 162, 235, .5)',
});

Lineチャート

typeにlineを指定します。

const config = {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                min: 10,
                max: 100
            }
        }
    }
};

Barチャート

typeにbarを指定します。

const config = {
    type: 'bar',
    data: data,
    options: {
        scales: {
            y: {
                title: {
                    display: true,
                    text: 'Y軸'
                },
                min: 0,
                max: 150
            }
        }
    }
};

ドーナツ

typeにdoughnutを指定します。dataの合計を100%として、各割合で描画します。

const myChart = document.getElementById('myChart');

const data = {
    labels: [
        'red',
        'blue',
        'green'
    ],
    datasets: []
};

data.datasets.push({
    data: [5, 1, 2, 2], // 各値の合計を100%として割合で描画される
    backgroundColor: [
        'rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(75, 192, 192)',
        'rgb(201, 203, 207)', // その他
    ],
    hoverOffset: 4,
    cutout: '50%'
});

const config = {
    type: 'doughnut',
    data: data
};

new Chart(myChart, config);

datasetsを追加すると内部にドーナツが増えます。hoverOffsetはマウスオーバー時にグラフが浮き出る量、cutoutは中心の大きさを指定します。

dataとbackgroundColorにlabelsより多い値を追加することで、「その他」などを表現できます。

レーダーチャート

typeにradarを指定します。全データの最小値が中心の値になります。

const data = {
    labels: ['知識', '体力', 'コミュ力', '運', '行動力'],
    datasets: []
};

data.datasets.push({
    label: 'person1',
    data: [1, 2, 5, 3, 2],
    borderWidth: 4,
    borderColor: 'rgb(255, 99, 132)',
    backgroundColor: 'rgba(255, 99, 132, .25)',
});

data.datasets.push({
    label: 'person2',
    data: [2, 4, 0, 3, 1],
    borderWidth: 4,
    borderColor: 'rgb(54, 162, 235)',
    backgroundColor: 'rgba(54, 162, 235, .25)',
});

const config = {
    type: 'radar',
    data: data,
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Radar Chart'
            }
        }
    }
};

new Chart(myChart, config);

Chart.jsでは、これら以外にも色々なグラフが描画できます。詳しくは、Chart.js Samplesを参照してください。

Tweet

前の記事

nvm-windowsのインストールと使い方

次の記事

cryptoを使って暗号化と復号を行う