勉強したことのメモ

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

  関連記事

GoogleMapでメインカラーを変更する方法

GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指 ...

サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...

jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

JavaScriptで小数の計算(decimal.js)

JavaScriptで小数の計算をすると値がずれることがあった。調べてみるとJa ...

javascript:void(0)について

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

jQueryやJavaScriptで認識違いしていたところのメモ(高速化)

認識違いしていたり、知らなかったりでもっと高速な 処理を行えそうな点があったので ...

javascriptの文末

下記みたいなコードがあって、文末に「;」が 無いのになんで動くのこれ? となった ...

GoogleMapAPIでヒートマップを表示する方法

GoogleMapAPIで花粉状況や雨量を可視化しやすいようなヒートマップ的なも ...

javascriptのtry文

javascriptとかjQueryを使ってて、Firefox,chromeはい ...