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 で複数軸の複合グラフを描く

JavaScript

概要

ドットインストールでJavaScriptについてやってみた
http://dotinstall.com/lessons/basic_javascript_v2

特徴

ブラウウザに実装されているスクリプト言語

かいてみる

hello world

root@www27032ue:/var/www/htdocs/study# cat index.html
<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>JavaScriptの練習</title>
</head>
<body>
        <script>
                // コメント
                console.log("hello world!");
        </script>
</body>
</html>

[F12]で管理者ツールを起動し、出力を確認できる
2014-11-24_233326

変数

root@www27032ue:/var/www/htdocs/study# cat index.html
### 以下ヘッダは省略する ###
<body>
        <script>
        /*
                変数
                - 文字列
                - 数値
                - 真偽値
                - オブジェクト
                 - 配列・関数・組み込みオブジェクト
                - undefined 定義されていない
                - null 何もない
        */

                // var msg  = "hello world!" という書き方も可能
                // "(ダブルクオーテーション)でも'(シングルクオーテーション)でも違いはない
                // 改行は\nを利用する
                var msg;
                msg = "hello world!";
                console.log(msg);
        </script>
</body>

数値計算

root@www27032ue:/var/www/htdocs/study# cat index.html
<body>
        <script>
                var x;
                x = 10 * 2;
                x = 10 % 3;
                console.log(x);
        </script>
</body>

条件分岐

root@www27032ue:/var/www/htdocs/study# cat index.html
<body>
        <script>
                var score = 55;
                if (score > 60){
                        console.log("OK");
                } else if (score > 40){
                        console.log("soso...");
                } else {
                        console.log("NG");
                }
        </script>
</body>

真偽値

if (x) {

}

### xが文字列の場合、上は以下と同義 ###
if (x !== ''){

}

while文

var i = 0;
while ( i < 10){
        console.log(i);
        i++;
}

ユーザにメッセージを表示する

// alertの表示
alert("hello");

// cancelボタンがついている
var answer = confirm("are you sure?");
console.log(answer);

// 変数を格納する
var name = prompt("what's your name?","名無し")
console.log(name);

2014-12-22_214246

関数

// 引数を持たせることができる
function hello(name) {
        console.log("hello" + name);
}

hello("Tom");

// 返り値をもたせることもできる
function hello2(name){
        return "hello" + name;
}
var greet = hello2("John");
console.log(greet);

関数その2

// 関数もデータ型であるため変数に入れることが可能
var varhello = function(name) {
        var msg = "hello" + name;
        return msg;
};
var greet = varhello("John");
console.log(greet);

関数その3

// 即時関数。定義して即実行する
(function hello(name) { // helloを省略することも可
        console.log("hello "+name);
})("Tom");

タイマー処理

// setInterval : 一定間隔で処理を実行。前の処理が終わっているかどうかは気にしない
// setTimeout : 一定時間経つと、一度だけ処理を実行。。前の処理が完了していると実行する
var i = 0;
function show() {
        console.log(i++);
}

setInterval(function(){
        show();
},1000);
// 3を表示したら終了する
var i = 0;
function show() {
        console.log(i++);
        var tid = setTimeout(function(){
                show();
        },1000);
        if (i > 3){
                clearTimeout(tid);
        }
}
show();

配列

var score = [100, 300, 500];
console.log(score[0]);
console.log(score);

2014-12-22_225338

オブジェクト

名前と値がグループ化されている

var user = {
        email: "shimizu.r.hiroaki@gmail.com",
        score: 80
};

console.log(user["email"]);
console.log(user.score);
console.log(user);

2014-12-22_225850

var user = {
        email: "shimizu.r.hiroaki@gmail.com",
        score: 80,
        greet: function(name) { // 関数のことをオブジェクトのメソッド。thisで自分のオブジェクトを指す
                console.log("hello," + name + " from " + this.email);
        }
};
user.greet("Tom");

2014-12-22_230945

組み込みオブジェクト

javascriptが用意しているオブジェクト

var s = new String("shimizu");
// 実は、var s = "shimizu"; でも同じことができる(文字列リテラル)
console.log(s.length);
console.log(s.replace("i","I"));
var d = new Date(2014, 1, 11, 10 ,20 ,30);
console.log(d.getFullYear());
console.log(d.getMonth());

DOM

ブラウザ自身もオブジェクトであり、操作することができる

// オブジェクトのプロパティを表示
console.dir(window);

window.document – 今開いているページのこと
Javascriptで書き換えることで動的にページを変更することができる
document にアクセスするための命令をdocument object model (DOM)と呼ぶ
以下について、文字列と色を変更している

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>JavaScriptの練習</title>
</head>
<body>
        <h1>見出し</h1>
        <p id="msg">こんにちは</p>
        <script>
        var e = document.getElementById('msg');
        e.textContent = 'hello!';
        e.style.color = 'red';

        </script>
</body>
</html>

2014-12-23_113738

イベント

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>JavaScriptの練習</title>
</head>
<body>
        <h1>見出し</h1>
        <p id="msg">こんにちは</p>
        <button id="add">click</button>
        <script>
        document.getElementById('add').addEventListener('click',function(){
        var e = document.getElementById('msg');
        e.textContent = 'hello!';
        e.style.color = 'red';
        });
        </script>
</body>
</html>

ボタンを押すと「こんにちは」の文字と色が変化する
2014-12-23_114144

おみくじを作る

http://dotinstall.com/lessons/omikuji_js
2014-12-23_161114

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>おみくじ</title>
</head>
<body>
        <h1>おみくじ</h1>
        <input type="button" value="あなたの運勢は" onclick="getOmikuji();">
        <p>あなたの運勢は...<span id="result"></span></p>
        <script>
                function getOmikuji(){
                        var omikuji = ["大吉","中吉","小吉"];
                        var result = Math.floor(Math.random() * omikuji.length);
                        document.getElementById('result').innerHTML = omikuji[result];
                }
        </script>
</body>
</html>

スロットマシーン

2014-12-23_161226

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>スロットマシーン</title>
        <style>
        .col{
        float: left;
        width: 100px;
        text-align: center;
        font-size: 32px;
        }
        </style>

</head>

<body>
<div class="col">
        <span id="num0">?</span><br>
        <input type="button" value="STOP" id="stop0">
</div>

<div class="col">
        <span id="num1">?</span><br>
        <input type="button" value="STOP" id="stop1">
</div>

<div class="col">
        <span id="num2">?</span><br>
        <input type="button" value="STOP" id="stop2">
</div>

<script>

(function() {
var timers,
nums,
stopCount;

document.getElementById('stop0').onclick = function() {
        stopSlot(0);
};
document.getElementById('stop1').onclick = function() {
        stopSlot(1);
};
document.getElementById('stop2').onclick = function() {
        stopSlot(2);
};


function startSlot(){
        timers = [];
        nums = [];
        stopCount = 0;

        runSlot(0);
        runSlot(1);
        runSlot(2);

}

function stopSlot(n) {
        // javascript 特有の書き方
        if (typeof nums[n] !== 'undefined') {
                return;
        }

        clearTimeout(timers[n]);
        nums[n] = document.getElementById('num'+ n).innerHTML;
        stopCount++;

        if (stopCount == 3){
                checkSlot();
        }
}

function checkSlot() {
        nums.sort();
        if(nums[0] == nums[1] && nums[0] == nums[2]){
                alert('すべて揃った');
        }else if (nums[0] == nums[1] || nums[1] == nums[2]){
                alert('2つ揃った');
        }else{
                alert('残念');
        }
}

function runSlot(n) {
        document.getElementById('num'+ n).innerHTML = Math.floor(Math.random() * 10);
        timers[n] = setTimeout(function() {
        runSlot(n);},50);
}

startSlot();
})();

</script>

</body>
</html>

5秒で決めろ

http://dotinstall.com/lessons/just_five_js
2014-12-23_160930

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>5秒で決めろ!</title>
</head>

<body>

<h1>5秒で決めろ!</h1>
<p><input type="button" value="start" onclick="start();"></p>
<p><input type="button" value="stop" onclick="stop();"></p>
<p id="result"></p>

<script>
var start;
var stop;
var FIVE_SECOND = 5 * 1000;
function start() {
        start = new Date().getTime();
        console.log(start);
}

function stop() {
        stop = new Date().getTime();
        console.log(stop);

        // 差を算出
        var diff = FIVE_SECOND - (stop - start);
        // 結果を表示
        var e = document.getElementById('result');
        if (diff == 0) {
                e.innerHTML= 'ぴったり';
        } else if (diff > 0){
                e.innerHTML = (diff / 1000) + '秒早い';
        } else {
                e.innerHTML = (diff / 1000) + '秒遅い';
        }
}
</script>
</body>
</html>

参考URL

ドットインストール-javascript関連
http://dotinstall.com/lessons/basic_javascript_v2
https://developer.mozilla.org/ja/docs/Web/JavaScript