勉強したことのメモ

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

  関連記事

youtubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

JavaScriptだけでTOPへ戻るリンクの表示

ページ内をある程度スクロールするとTOPへ戻るリンクを 表示させたかった。 ただ ...

javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...

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

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

highcharts.jsについて

プログラムの作りかえを行う際、既存のソースで highcharts.jsを使って ...

GoogleMapAPIで現在地取得と目的地までのルート表示

GoogleMapAPIを使って現在地を取得しつつ、目的地までのルートを表示させ ...

javascriptのtry文

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

alert後にページ遷移

JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...

JavaScriptでURLのクエリを取得する

やりたかった事はJavaScriptでGETのクエリを取得。 ■ソース var ...

リンク部分にマウスオーバーでツールチップを表示(nicetitles.js)

既存のソースにて見たことの無いプラグインが 使われていたのでメモ。 ■参考 ht ...