グラフを描画する【Node.js】【Chart.js】

2019年11月18日

今回はNode.jsとはちょっと離れて「Chart.js」について紹介していきます。

見た目はこんな感じになりますよ！

プログラム

var express = require('express');
var app = express();

// EJS設定
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

app.get('/', function (req, response) {
  var score_data = [100,20,25,80,70,65];
  response.render('index', {score:score_data});
})

これだけです。点数の配列を送り付けているだけです。

HTML

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>テストの点数</title>
</head>
    <body>
        <nav class="navbar navbar-dark bg-primary mb-2">
            <a href="#" class="navbar-brand">テストの点数</a>
        </nav>
        <div class="container">
            <canvas id="myChart" ></canvas>
        </div>
    </body>
    <!-- 画面固有の処理 -->
    <script>
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["国語", "算数", "理科", "社会", "道徳", "体育"],
                datasets: [{
                    label: "スコア",
                    data: [<%=score %>], // サーバ側から返した得点データ
                    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: 2
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });
    </script>
</html>

グラフの定義などはこちらでやります。
なんとなく理解してもらえるでしょうか？
全く意味不明というところはないかな？

まとめ

グラフを書くときは、これが一番ですね！

システム開発

Posted by @erestage