勉強したことのメモ

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

  関連記事

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

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

CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...

JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...

javascriptでランダム英数字

やりたかった事はjavascriptでランダム英数字の羅列を取得。 ■参考サイト ...

PHPで位置情報を取得してGoogleMapAPIで使用する方法

GPSみたいな位置情報をPHPで取得し、GoogleMapAPIでその場所を反映 ...

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

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

クロスドメイン突破をjavascriptで行う

ajaxとかでクロスドメインを突破する際は、 PHPファイルを介すかJSONPを ...

JavaScriptでUNIXタイムスタンプ取得

UNIXタイムスタンプを用いた際、 年月日からすぐUNIXタイムスタンプを出した ...

formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

javascriptでスクロール

やりたかった事は、 ・javascript,jQuery使う ・スクロールさせた ...