ローソク足チャートを描画する【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>
えらい簡単ですが、これでチャートになります。
ただ、余白が妙に大きいのが難点です。
なんとかできないのか、考えないといけませんね。