ローソク足チャートを描画する【Node.js】

Node.jsを使ってローソク足チャートを描画します。つまりは、こんな感じのグラフを描画するということです。

プログラム

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

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

var request = require('request'); // npm install request --save
var cheerio = require('cheerio'); // npm install cheerio --save

app.get('/', function (req, res) {
  
  var options = {
    url: 'https://kabuoji3.com/stock/1557/',
    method: 'GET'
  }

  request(options, function (error, response, body) {
    var price_data = [];
    try {
      const $ = cheerio.load(body);
      $(".stock_data_table > tbody > tr").each((i, elem) => {
        var item_count = $(elem).find("td").length;
        if (item_count == 7) {
          item = [];
          $(elem).find("td").each((n, td_elem) => {
            var value = $(td_elem).text();
            //console.log(n, value);
            if (n < 5) {
              item.push(value);
            }
          });

          // 安値,始値,終値,高値の順にしないとグラフにできない。
          // 始値,高値,安値,終値の順になっている。
          // 文字列のままだとエラーになるので数値変換する

          let start_price = parseInt(item[1]);
          let high_price  = parseInt(item[2]);
          let low_price   = parseInt(item[3]);
          let end_price   = parseInt(item[4]);

          item[0] = "";
          item[1] = low_price;
          item[2] = start_price;
          item[3] = end_price;
          item[4] = high_price;

          price_data.push(item);

          if (price_data.length >= 50) return false; // breakでは抜けられない
        }
        //console.log(item_count);
      });
      
   } catch (e) {
       console.error(e);
   }
   res.render('index', {data:JSON.stringify(price_data.reverse())});
  });
});

app.listen(3000, function () {
});

元データと並び順が異なるので入れ替えています。
エラーになるため、parseIntで数値に変換しています。

requestモジュールは便利なのでオススメします。

HTML

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable(<%-data%>, true);

    var options = {
      legend:'none'
      , chartArea:{top:"5em", bottom:"5em"},
    };

    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

    chart.draw(data, options);
  }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height:100%;"></div>
  </body>
</html>

えらい簡単ですが、これでチャートになります。
ただ、余白が妙に大きいのが難点です。
なんとかできないのか、考えないといけませんね。

システム開発

Posted by @erestage