highstockの使い方 初心者向け
2013-11-27 2017-09-13
highstockは株や為替(FX)などでよく使われる、ローソク足を表示するのに特化したjQueryのグラフ描画プラグインです。
highchartsのおまけみたいなものですが、私は最初にこっちから使いはじめました。FXで一発当ててやろうと思って。
その後FXでは大敗を喫し、預金の全てを持っていかれた上、更にその数年後に起死回生をかけて始めた株で更なる大損をするのですが、highstockを勉強し始めたタイミングではそんなこと夢にも思っていませんでした。
highstockの使い方をこれから説明しますが、使い方には色々な意味で気を付けてください。
はじめに
今回のhighstock解説ですが、対象は
・highstockを使ってみたけど、よくわからなくて挫折した人
・highchartsは使ったことがあるけど、highstockは使ったことがない人
・highchartsの入門記事を読んで、チャートの表示までは何となく出来そうな気がしている人
くらいまで。
highchartsを触ったことがなくても何とかなりそうな感じに解説するつもりですが、highchartsより複雑なので先にhighchartsを軽く理解してから挑戦した方が良いと思います。別記事の宣伝終わり。
今回も、「とりあえず表示は出来る」に加えて「簡単な項目はいくらかわかる」くらいまでを目指します。
一回表示して満足してはならぬ。
ナイスな投資関連ツールとか作ったら是非教えてください。
highstock解説
最低限必要なのが
1.チャートを表示するためのhtml
2.チャートを作成するためのjs
出来れば欲しいのが
3.データを生成する何らかのプログラム
データ生成プログラムとの連携はまた今度にして、今回は最低限の部分だけ説明。
まずはソース。
html
|
1 2 3 4 5 6 |
<!-- jsファイル読み込み --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="./js/highstock.js"></script> <script type="text/javascript" src="./js/chart.js"></script> <!-- チャート表示 --> <div id="container"></div> |
js(chart.js)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
$(function() { $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlc.json&callback=?', function(data) { // create the chart $('#container').highcharts('StockChart', { chart: { width:500, heigth:300 }, rangeSelector : { selected : 1 /* buttons: [{ type: 'month', count: 1, text: '1m' }, { type: 'month', count: 3, text: '3m' }, { type: 'month', count: 6, text: '6m' }, { type: 'ytd', // year to date (1月スタートでそこから最後まで。) text: 'YTD' }, { type: 'year', count: 1, text: '1y' }, { type: 'all', text: 'All' }] */ }, title : { text : 'AAPL Stock Price(メインタイトル)' }, series : [{ type : 'candlestick', name : 'AAPL Stock Price', data : data, dataGrouping : { // データをどの範囲でまとめるか units : [ ['week', // unit name [1] // allowed multiples ], [ 'month', [1, 2, 3, 4, 6]] ] } }] }); }); }); |
html解説
|
1 2 3 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="./js/highstock.js"></script> <script type="text/javascript" src="./js/chart.js"></script> |
jsの呼び出し部分。highchartsと全く同じなので詳細はそちらを参照。chart.jsがチャート生成用の自作しなければならないjs。他は公式サイトの提供しているものを設置して呼び出すだけ。jQueryは↑のように「Google Hosted Libraries」を利用すれば自分で設置する必要もない。(ただし、他のjsプログラムと共存させる場合は、バージョンに注意)
|
1 |
<div id="container"></div> |
チャート表示部分は「id=”container”」を指定する事で、チャート作成部分で指定する「チャートの受け皿となる場所」を用意している。詳細はjs解説時に。
js解説
今回のソースは、highstock公式デモの中の「candlestick」を少しだけいじったもの。ほとんど手は加えていないので、これがわかれば公式のデモも大体わかる。といいね。
これの各要素を解説していく。
宣言部分
|
1 2 3 |
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlc.json&callback=?', function(data) { // create the chart $('#container').highcharts('StockChart', { |
いきなりちょっと難しい。1行目の$.getJSONは「JSON形式のデータをGETで取得しますよ」という意味。今回は「http://www.highcharts.com/samples/」のデータを取得している。細かい事はまたそのうち説明するので、今回は「何かデータ取ってるんだな」くらいに思っておけばOK。データの中身については後述する。
$(‘#container’)はjQueryの書き方。#がidの意味になるので、id=”container”のタグを表す。
「html内のid=”container”のタグに、Highchartsのグラフを表示しますよ」という意味。
chart
|
1 2 3 4 |
chart: { width:500, heigth:300 }, |
チャートの入れ物。
宣言部分で、表示対象の要素を指定しない場合は、ここのrenderToで要素を指定する。(が、書き方が結構変わるので今回も気にしなくて大丈夫)
width、heigthなどでチャートのサイズも指定できる。
rangeSelector
|
1 2 3 4 5 6 7 8 9 10 11 12 |
rangeSelector : { selected : 1 /*buttons: [{ type: 'month', count: 1, text: '1m' }, { type: 'month', count: 3, text: '3m' }*/ }, |
チャートの表示範囲を制御する項目。元のソースが長かったので少し削った。また、上のソースではselectedしか指定されていないが、実際には色々な要素が(勝手に)デフォルトで指定されている。
selectedを説明するためには、buttonsの説明が必要なため、そこだけコメントアウト状態で追記している。
それほど重要ではないので、難しいと感じた人は飛ばした方が良い。(今のところは)
buttons
ボタン群の制御をする項目。「ボタン群って何」って思った人は記事のTOP画像を参照。Zoomって書いてあるところの右側ボタンがそれ。
typeに「month」「year」などの単位を入れ、countに数字を入れる。typeがmonth、countが3であれば「表示を3か月分に切り替えるボタン」となる。textには、ボタンの表示に利用したい文字を入れる。
typeの「ytd」は「year to date」の略で「年度始めから現在まで」の意味。財務関係の用語。
selected
上で説明したボタンの「何番目の要素をデフォルトで利用するか」を指定する項目。配列の指定なので、0から始まる。
このソースだとselectedは1になっているので、buttonの2番目の要素「3m」がデフォルトとなる。
title
|
1 2 3 |
title : { text : 'AAPL Stock Price(メインタイトル)' }, |
チャートのメインタイトル。textにタイトルを指定する。marginとかstyleとか見た目の指定も色々できる。
titleという要素自体は、色々な要素の子要素としても登場する。
series
チャート本体。highchartsに比べるとデータの形が複雑なため注意。株や為替の知識が全くないと少し難しいかもしれない。
type
チャートのタイプを指定する。
‘candlestick’は日本語で言うところのローソク足。ローソク足の意味がわからないとデータ部分の意味が理解できないので注意。「ローソク足」でググれば大体わかると思う。
他のタイプについては公式のデモを参照。色々あるのでいじってみるときっと楽しい。
name
チャートの名前。highstockの場合、typeによっては一見どこで利用しているのかわからなかったりする。highchartsの解説で紹介したtooltipなどで利用しているが、それほど意識しなくても良い。
作りたいチャートのタイプによるが、highstockの場合、あまり重要ではないかもしれない。
data
チャートのデータを指定する。
データのタイプは、チャートのタイプにより異なる。今回のcandlestickであれば
[UNIXタイム(ミリ秒)、OPEN、HIGH、LOW、CLOSE]の配列が1本のローソク足となる。
例：ローソク足3本分のデータ。
[[1163980800000,85.40,87.00,85.20,86.47],[1147737600000,68.10,68.25,64.75,64.98],[1147824000000,64.70,65.70,64.07,65.26]]
javascriptのUNIXタイムはミリ秒で扱うので、phpなど秒で扱うプログラムから値を取得した場合は注意が必要。
dataGrouping
データをどの範囲でまとめるか、を指定する。’day’、’week’など範囲の単位と、[1,2,3]などの数字の配列で「何日分のデータを1本で表示するか」を決める。今のところはあまり気にしなくても良い。
あとがき
highchartsに比べると少し難しいが、出力されるチャートは結構カッコイイので頑張って使いこなしてみてください。一番のキモはseriesのdata。ローソク足などのOHLCデータを簡単に加工して表示できるのがhighstockの売りなので「OHLC」「ローソク足」「初値、終値」あたりのキーワードで検索すると色々楽しい使い道が思い浮かぶと思います。ただし、そこから投資に興味を持ってしまったとしても、私は一切責任を負えません。私は今日も負けました。
