Chart.jsを使ってグラフを描画する方法

公式サイト

• Chart.js

事前準備

プラグインの読込

プラグインの読込方法は2つ。
ソースを自身のサーバー内に置いて読み込んでくるかCDNを利用する。

• ソースのDL：Github
• CDN

qiita.rb

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>

利用方法

• チャートを描画したい場所にcanvasタグを記述

qiita.rb

<canvas id="ChartDemo" width="400" height="400"></canvas>

• 描画したいグラフをJSで記述する

基本的な記述方法

qiita.rb

<script>
//htmlタグの設定したIDを取得
var ctx = document.getElementById("ChartDemo");
//グラフを描画
var ChartDemo = new Chart(ctx, {
    //グラフのタイプを指定 (line,bar,rader,polarArea,pie,doughnut,bubble)
    type: 'line',
    //描画するグラフのデータを設定
    data: {
　　　　　//X軸のラベル設定
        labels: ["...", "...", "..."],
　　　　　//仰臥するデータの細かな設定
        datasets: [
        　{
          //ここに細かなデータの設定を記述
        　}
    　]
    },
    options: {
        //細かなオプションを設定したい場合はここに記述
    }
});
</script>

• 設定できるオプション一覧

折れ線グラフの書き方

• 設定できる項目
• 設定オプション

qiita.rb

<script>
var ctx = document.getElementById("ChartDemo");
var ChartDemo = new Chart(ctx, {
    //グラフのタイプを指定(折れ線グラフ)
    type: 'line',
    //描画するグラフのデータを設定
    data: {
　　　　　//X軸のラベル
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
        　{
            //凡例
            label: "My First dataset",
            //折れ線グラフとX軸の間に色を描画するか否か
            fill: false,
            //背景色
            backgroundColor: "rgba(75,192,192,0.4)",
            //境界線の色
            borderColor: "rgba(75,192,192,1)",
            //点の色
            pointBorderColor: "rgba(75,192,192,1)",
            //点のサイズ
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointRadius: 1,
            //点にマウスオーバーした時の設定
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            //グラフの数値            
            data: [65, 59, 80, 81, 56, 55, 40],
        　}
    　]
    },
    options: {
        //細かなオプションを設定したい場合はここに記述
    }
});
</script>

棒グラフの書き方

• 設定できる項目
• 設定オプション

qiita.rb

<script>
var ctx = document.getElementById("ChartDemo");
var ChartDemo = new Chart(ctx, {
    //グラフのタイプを指定(棒グラフ)
    type: 'bar',
    //描画するグラフのデータを設定
    data: {
        //X軸のラベル
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            //背景色指定(各グラフ毎)
            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)'
            ],
            //線の太さを指定(px)
            borderWidth: 1,
            //グラフの数値
            data: [65, 59, 80, 81, 56, 55, 40],
        }]
    },
    options: {
        //細かなオプションを設定したい場合はここに記述
    }
});
</script>