こんにちは、こちょすです。
今回はjavascriptを使って株価チャート（ローソク線）を描く方法についてご紹介します！
株価チャートは終値や始値などいくつもの要素があり、自分でイチからグラフを作ろうとすると大変です。。。
しかしご安心を！googleがそのためのAPIを提供してくれているので、そのライブラリを使えば誰でも簡単に株価チャートを描画することができます！
pythonを使って株価の分析をしたい！という方は以下の記事もぜひ読んでください！
-
-
[pandas]超簡単！pythonで株価や出来高でフィルタリングする方法！
続きを見る
こんな方におすすめ
- javascriptを使って株価チャートを描画したい
- プログラミングで株の分析がしたい
- googlechartapiの使い方が知りたい
それでは行ってみましょう！
目次
googlechartapiって？
今回はプログラミング言語としてはJavascriptを使います。
Javascriptは基本的にフロントエンドの言語なので、今回のようにグラフを描画したり、絵を書いたり、スライドショーを作ったりできるライブラリが数多くあります！
今回利用するのはGoogle Chartsというライブラリです。
このライブラリで何ができるかというと、グラフをブラウザ上に表示することができます。
メジャーなグラフは基本的に全て描画できると思ってOKです！
GoogleChartsで描ける主なグラフ
・棒グラフ（Column Chart）
・折れ線グラフ（Line Chart）
・円グラフ（Pie Chart）
・分散図（Scatter Chart)
・複合グラフ（Combo Chart)
・ローソク線（Candlestick Chart)
などなど
このほかにも表や、バブルチャート、タイムラインなど、多種多様なグラフなどを描画することができる便利なライブラリです！
公式リファレンスは以下にあるので、この記事を読んでさらに詳しく知りたいと思った方はご参照ください！
Google Chartsが使える環境を作る
まずはじめに、Google Chartsが使える環境を作って行きたいと思います。
この章のゴールはブラウザ上に以下のような円グラフを描画することです！
環境構築と言っても、簡単です！たった2つのStepで完了です！
Step1 自分のPCの好きな場所にindex.htmlを作り、以下のコードをコピーする
まずは自分の好きなところにindex.htmlを作成してください。 そのあと、ちょっと長いのですが、以下のコードを自分のindex.htmlに貼り付けてください！
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
中で何をしているのか簡単に説明しておきます！
貼り付けたコードは大きく、headとbodyの2つになっていることがわかると思いますので、それぞれで何をしているか見ていきましょう！
head部分
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
headの最初に書かれているのは「おまじない」だと思ってください。ここでGoogle Chartsのライブラリを呼び出しています。
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
ここで定義しているfunction drawChart()がグラフを描画している処理になります。
まず初めにグラフで使うデータを定義します。円グラフの場合だと2つの要素を持つ二次元配列で定義します。
グラフによってデータの定義の仕方が異なるので、自分の作りたいグラフの公式リファレンスを見て確認してください！
ちなみにまだfunctionのとじカッコはありませんので、処理はまだ続きます。
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
データの定義が出来たら次はオプションの設定をしています。titleのところにはグラフのタイトルを書きます。
幅と高さも任意で設定してください。
オプションなので、これらは設定しなくてもグラフを描画することは可能です！
最後にdocument.getElementByIdで取得したchart_divに対して、
PieChartを描画するようにライブラリのメソッドを呼び出しています。
body部分
では次にbody部分です。といってもbodyでやっていることはほんの少しだけです。笑
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
chart_divというidを持つdivを宣言しているだけです！このdivをidを使って取得して、javascriptで描画しています。
Step2 index.htmlをブラウザで開く
あとはブラウザでこのファイルを開くだけです！ 以下のグラフが表示されれば成功です！
株価チャートを描画する
Google Chartsの使い方がわかれば株価チャート（ローソク線）の描き方も簡単です！
サンプルコードを使って確認してみてください！
<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([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
var options = {
legend:'none'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
以下のように表示されていれば成功です！
中身についても大体読めるようになっているのではないでしょうか！💪
円グラフとの大きな違いはデータの設定方法です。
株価チャートの場合には以下のように5つの要素を持つ配列で構成されます。
['Mon', 20, 28, 38, 45],
それぞれの持つ意味は、以下の通りです。
データの意味
[時間軸（日付など）, 安値 , 始値 , 終値]
まとめ
いかがでしたでしょうか。
イチから全て自分でグラフを描こうとすると大変ですが、この便利なライブラリを使えば簡単に実装することができます！
最後に要点だけまとめておきます！
ポイント
・GoogleChartsとはJavascriptのライブラリの1つ。棒グラフや折れ線グラフ、株価チャートなどを描くことができる
・利用方法はhtmlのheadタグの中で「おまじない」を書くだけ
・データは描きたいグラフによって定義が異なる
・株価チャートの場合、1日のローソク線は[時間軸（日付など）, 安値 , 始値 , 終値]で書く
いかがでしたでしょうか。とても簡単に、いい感じのグラフが描けるので、ぜひ使ってみてくださいね！
