SVG学習 9日目「株価チャート」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

SVGを学習してようやく目的のツールを作ることができました。
 

株価チャートは、「キャンドルチャート」として、色々なグラフツールでライブラリとして公開されているのですが、どれも機能が足りていなかったり、表示を変更したいが根本的に対応していなかったりして、かなりのカスタマイズをしなければいけないものがほとんどで、その工数を考えたら自作した方が早いという結論だったわけです。
 

株価チャートに求めたかった事

・レスポンシブデザインに対応したい。
どうしても昨今ではスマートフォンというニーズを外せないため、ブラウザの表示サイズに対応できるチャートツールが必要。
 

・表示を日本語にしたい。
ほとんどのチャートツールは海外製の為、いたるところが英語表記されているので、それらを修正していくのはなかなかの手間。
 

・表示スピードをサックサクにしたい。
ライブラリは裏で色々な処理をしているらしく、表示がモタつくものも少なくありませんでした。
必要最低限の機能にするだけで、サクサクの挙動が可能になりました。

ソースコード

使い方

index.htmlのheadタグでcandlechart.jsを読み込んで、scriptタグで、グラフを表示したいタグをselectorで指定してあげるだけで、表示されますが、その前に事前に株価データをcsv形式で持っておかなければいけません。
 

csvデータは、下記サイトで企業データを一括でダウンロードできるので、それを使ってもらえるといいでしょう。
 

https://kabuoji3.com/stock/
 

ただ、一つだけ注意点があって、日付データの箇所がダウンロードしたものだろ”yyyy-mm-dd”となっていますが、”-“をとった”yyyymmdd”としないとツールではエラーになってしまう仕様にしました。
 

テキストエディタで置換処理すればすぐに対応できると思います。
 

そして、下記のようにscriptで実行してあげればチャート表示されます。
 

 

指定する箇所をシンプルにしたので、説明もほとんどいらないかもしれませんが、一応説明すると・・・
 

id : チャートを表示するエレメントのselectorを記載。(今回はid=”svg”の中に表示)
data : csvデータのurlを記載。(phpなどで動的にする事も可能です)
height : 表示したい際の縦サイズを記載。(最低値は400ぐらいにしてください)
 

簡単解説

とにかくこだわったのは、チャートの拡大やスクロールなどをボタンをたくさん設置するのを避けたくてシンプルインターフェイスを目指しました。
 

結果、チャート下部にするロールバーとして、全体チャートの表示と、表示エリアのバーを設置することで、かなり分かりやすく使いやすくなりました。
 

また、株価分割にも対応したかったので、分割日を下記フォーマットでcsvに混ぜ込む事で、それ以前の株価が分割後の表示になるようにしています。
 

 

ちなみに、分割日は、info表示の一番下に分割数を表示するようにしました。
グラフ表示にも、この情報を入れたいところですね。
 

今後つけたい機能

表示期間の日付を表示していますが、これをカレンダーで任意入力できるようなモードが必要ですね。
 

以前に書いたカレンダーjsを使って行う事も可能です。
 

[Javascript] カレンダーのソースコードを記載
 

あとは、分割数のチャート表示を視覚化したいところですね。

参考

freeで使える株価チャートツールです。
 

http://techanjs.org/
 

過去のSVG記事

SVG学習 1日目「SVGの利点を再確認」

SVG学習 2日目「基本描画」

SVG学習 3日目「Javascriptで描画」

SVG学習 4日目「テキストと画像ファイルの挿入」

SVG学習 5日目「SVGアニメーション」

SVG学習 6日目「グループ」

SVG学習 7日目「イベント」

SVG学習 8日目「PATH」

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です