勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

Highstockの使い方とカスタマイズ

      2018/06/12

株価などの値動きを図表とするローソク足のグラフを何らかの方法で描写したかった。調べてみるとhighstockというプラグインが良いらしい。以下に使い方やカスタマイズ方法をメモ。

 

公式サイト等のリンク

公式サイト

https://www.highcharts.com/products/highstock/

デモ

https://www.highcharts.com/stock/demo

リファレンス

https://api.highcharts.com/highstock/

 

CDNで使いたい場合

以下のhighstock-all.jsが使えた。

https://cdnjs.com/libraries/highstock

 

基本的な使い方

以下がサンプルになる。

http://sample.taitan916.info/highstock/

ソースは以下の通り。

dataの部分は[date(タイムスタンプ), Open, High, Low, Close]の数値を入れる。尚、Y/m/d H:i:sとかの形からタイムスタンプに変換したい場合は以下で対応する。

 

右下のロゴを消したい場合

以下を追記する。

サンプルは以下の通り。

http://sample.taitan916.info/highstock/index2.php

 

下部のスクロール部分を消したい場合

以下を追記する。

サンプルは以下の通り。

http://sample.taitan916.info/highstock/index3.php

 

上部のzoomボタンとハンバーガーメニューを消したい場合

これはオプションで消す方法が分からなかったので以下CSSで対応する。

サンプルは以下の通り。

http://sample.taitan916.info/highstock/index4.php

 

グラフの詳細(ツールチップ)の日時部分を変更したい場合

Y/m/d H:i形式にしたい場合は以下を追記する。

サンプルは以下の通り。

http://sample.taitan916.info/highstock/index5.php

 

数値をカンマ区切りにしたい

数値が1000とかの場合にデフォルトではカンマ区切りではなく半角スペース区切りになる。Highchartsだとlang.thousandsSepで指定できるみたいだけどHighstockだと指定できなかった。なのでjavascriptファイル自体を編集する(自己責任でお願いします)。

サンプルは以下の通り。

http://sample.taitan916.info/highstock/index6.php

 

グラフの色を2種類で指定したい

デフォルトだと白と薄い青になっている部分を違う色に変更したかった。こちらもオプションでの指定はあるが2色の固定にするという方法が見つからなかったので、javascriptファイル自体を編集した(自己責任でお願いします)。白の部分を赤(#f00)で薄い青の部分を濃い青(#00f)に変更すると想定。

サンプルは以下の通り。

http://sample.taitan916.info/highstock/index7.php

 

デフォルトのzoom間隔を指定する

以下を追記する。

type部分はsecond,minute,hour,day,week,monthなど。countは半角数値を入れて調整する。text部分はボタンの表示名っぽいので適宜入力する。

サンプルは以下の通り。

http://sample.taitan916.info/highstock/index8.php

 

データをリアルタイムに更新(追加)したい場合

ソースは以下の通り。

2秒後にdata2を追加するというもの。サンプルは以下の通り。

http://sample.taitan916.info/highstock/index9.php

もし同時刻(同タイムスタンプ)のデータがあると変な表示になるので、updateChart関数内で最初のデータと追加するデータを比較し、最初のデータのタイムスタンプ以下のデータは削除し、それ以外のデータのみ追加するという形がよさそう。

 - javascript

  関連記事

javascript_logo_unofficial-300x300
時間差をつけて処理する

setTimeout( 処理, タイムアウト時間 ); で、時間差をつけて処理が ...

jquery_logo
日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...

javascript_logo_unofficial-300x300
table内のiframeのheightを最大高さにする

tableのtdの中にリンクがあり、クリックすると td内でiframeが開く。 ...

javascript_logo_unofficial-300x300
JavaScriptで配列をループ処理(for-in)

JavaScriptでforeach使ったこと無かったけど、 配列のキーが連番じ ...

javascript_logo_unofficial-300x300
JavaScriptで三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...

mzl.qobqfuxq
JavaScriptで住所から経度緯度を取得する

やりたかった事はformに住所を入れてsubmitする際に、javascript ...

jquery_logo
Ajaxでプラグイン無しのファイルアップロード

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

javascript_logo_unofficial-300x300
javascript:void(0)について

よく使う<a href="javascript:void(0)" oncl ...

mzl.qobqfuxq
GoogleMapAPIで現在地を更新する方法

GoogleMapAPIを使って現在地を取得してその場所にマーカーを設置、その後 ...

javascript_logo_unofficial-300x300
JavaScriptで画像に光沢をつける(glossy.js)

凄く簡単に光沢がつけられるライブラリがあったのでメモ。 ライブラリを呼び出してc ...