2017-09-13TwitterFacebookはてブLINEhighstockは株や為替(FX)などでよく使われる、ローソク足を表示するのに特化したjQueryのグラフ描画プラグインです。highchartsのおまけみたいなものですが、私は最初にこっちから使いはじめました。FXで一発当ててやろうと思って。その後FXでは大敗を喫し、預金の全てを持っていかれた上、更にその数年後に起死回生をかけて始めた株で更なる大損をするのですが、highstockを勉強し始めたタイミングではそんなこと夢にも思っていませんでした。highstockの使い方をこれから説明しますが、使い方には色々な意味で気を付けてください。・highchartsの入門記事を読んで、チャートの表示までは何となく出来そうな気がしている人くらいまで。highchartsを触ったことがなくても何とかなりそうな感じに解説するつもりですが、highchartsより複雑なので先にhighchartsを軽く理解してから挑戦した方が良いと思います。今回も、「とりあえず表示は出来る」に加えて「簡単な項目はいくらかわかる」くらいまでを目指します。一回表示して満足してはならぬ。ナイスな投資関連ツールとか作ったら是非教えてください。最低限必要なのが1.チャートを表示するためのhtml2.チャートを作成するためのjs出来れば欲しいのが3.データを生成する何らかのプログラムデータ生成プログラムとの連携はまた今度にして、今回は最低限の部分だけ説明。(1月スタートでそこから最後まで。(1月スタートでそこから最後まで。src="./js/chart.js"></script>jsの呼び出し部分。highchartsと全く同じなので詳細はそちらを参照。chart.jsがチャート生成用の自作しなければならないjs。他は公式サイトの提供しているものを設置して呼び出すだけ。Libraries」を利用すれば自分で設置する必要もない。id="container"></div>チャート表示部分は「id=”container”」を指定する事で、チャート作成部分で指定する「チャートの受け皿となる場所」を用意している。今回のソースは、highstock公式デモの中の「candlestick」を少しだけいじったもの。ほとんど手は加えていないので、これがわかれば公式のデモも大体わかる。これの各要素を解説していく。{いきなりちょっと難しい。1行目の$.getJSONは「JSON形式のデータをGETで取得しますよ」という意味。今回は「http://www.highcharts.com/samples/」のデータを取得している。細かい事はまたそのうち説明するので、今回は「何かデータ取ってるんだな」くらいに思っておけばOK。データの中身については後述する。$(‘#container’)はjQueryの書き方。#がidの意味になるので、id=”container”のタグを表す。「html内のid=”container”のタグに、Highchartsのグラフを表示しますよ」という意味。{width:500,heigth:300},チャートの入れ物。宣言部分で、表示対象の要素を指定しない場合は、ここのrenderToで要素を指定する。(が、書き方が結構変わるので今回も気にしなくて大丈夫)width、heigthなどでチャートのサイズも指定できる。'3m'}*/},チャートの表示範囲を制御する項目。元のソースが長かったので少し削った。上のソースではselectedしか指定されていないが、実際には色々な要素が(勝手に)デフォルトで指定されている。selectedを説明するためには、buttonsの説明が必要なため、そこだけコメントアウト状態で追記している。それほど重要ではないので、難しいと感じた人は飛ばした方が良い。(今のところは)buttonsボタン群の制御をする項目。「ボタン群って何」って思った人は記事のTOP画像を参照。Zoomって書いてあるところの右側ボタンがそれ。typeに「month」「year」などの単位を入れ、countに数字を入れる。typeがmonth、countが3であれば「表示を3か月分に切り替えるボタン」となる。textには、ボタンの表示に利用したい文字を入れる。date」の略で「年度始めから現在まで」の意味。selected上で説明したボタンの「何番目の要素をデフォルトで利用するか」を指定する項目。配列の指定なので、0から始まる。このソースだとselectedは1になっているので、buttonの2番目の要素「3m」がデフォルトとなる。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。あたりのキーワードで検索すると色々楽しい使い道が思い浮かぶと思います。そこから投資に興味を持ってしまったとしても、私は一切責任を負えません。私は今日も負けました。