勉強したことのメモ

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/

ソースは以下の通り。

<script>
var data = ([
	[1294617600000,0.4840,0.4903,0.4817,0.4892],
	[1294704000000,0.4927,0.4928,0.4850,0.4881],
	[1294790400000,0.4904,0.4920,0.4886,0.4920],
	[1294876800000,0.4931,0.4952,0.4912,0.4938],
	[1294963200000,0.4941,0.4978,0.4921,0.4978],
	[1295308800000,0.4707,0.4925,0.4657,0.4866],
	[1295395200000,0.4976,0.4980,0.4813,0.4841],
	[1295481600000,0.4806,0.4833,0.4716,0.4753],
	[1295568000000,0.4768,0.4784,0.4666,0.4667],
	[1295827200000,0.4670,0.4821,0.4667,0.4821],
	[1295913600000,0.4805,0.4878,0.4780,0.4877],
	[1296000000000,0.4899,0.4937,0.4879,0.4912],
	[1296086400000,0.4911,0.4924,0.4898,0.4903],
	[1296172800000,0.4917,0.4920,0.4765,0.4801],
	[1296432000000,0.4797,0.4858,0.4776,0.4847],
	[1296518400000,0.4876,0.4938,0.4871,0.4929],
	[1296604800000,0.4921,0.4932,0.4908,0.4919],
	[1296691200000,0.4911,0.4918,0.4836,0.4906],
	[1296777600000,0.4909,0.4953,0.4907,0.4950],
	[1297036800000,0.4970,0.5046,0.4966,0.5027],
	[1297123200000,0.5053,0.5079,0.5031,0.5074],
	[1297209600000,0.5074,0.5129,0.5070,0.5117],
	[1297296000000,0.5106,0.5143,0.4971,0.5065],
	[1297382400000,0.5068,0.5111,0.5051,0.5098],
	[1297641600000,0.5097,0.5135,0.5096,0.5131],
	[1297728000000,0.5131,0.5142,0.5108,0.5141],
	[1297814400000,0.5154,0.5213,0.5150,0.5188],
	[1297900800000,0.5104,0.5147,0.5093,0.5119],
	[1297987200000,0.5124,0.5136,0.4993,0.5008],
	[1298332800000,0.4888,0.4934,0.4825,0.4837],
	[1298419200000,0.4840,0.4923,0.4837,0.4895],
	[1298505600000,0.4915,0.4931,0.4834,0.4898],
	[1298592000000,0.4932,0.4978,0.4926,0.4974],
	[1298851200000,0.5018,0.5072,0.5016,0.5046],
]);
var chart;
chart = Highcharts.stockChart('container', {
	chart: {
		height:300, 
		width:400, 
	},
	series : [{
		type : 'candlestick',
		name : 'chart',
		data : data,
	}], 
});
</script>

dataの部分は[date(タイムスタンプ), Open, High, Low, Close]の数値を入れる。尚、Y/m/d H:i:sとかの形からタイムスタンプに変換したい場合は以下で対応する。
<script>
var date1 = '2018/01/01 10:00:00';
var date2 = '2018-01-01 20:00:00';

var date1_time = new Date(date1);
var date2_time = new Date(date2);

console.log(date1_time.getTime()); //1514768400000
console.log(date2_time.getTime()); //1514804400000
</script>

 

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

以下を追記する。

credits: { 
	enabled: false,
},

サンプルは以下の通り。

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

 

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

以下を追記する。

scrollbar: false,
navigator: false,

サンプルは以下の通り。

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

 

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

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

<style>
.highcharts-range-selector-buttons, 
.highcharts-input-group, 
.highcharts-button{
	display:none;
}
</style>

サンプルは以下の通り。

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

 

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

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

tooltip: {
	xDateFormat: '%Y/%m/%d %H:%I'
},

サンプルは以下の通り。

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

 

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

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

//34行目付近
//thousandsSep:" "を以下に変更
thousandsSep:","

サンプルは以下の通り。

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

 

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

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

//白い部分は377行目付近
//upColor:"white"を以下に変更
upColor:"#f00"

//薄い青部分は33行目付近
//colors:"#7cb5ec,#434348,#90ed7d,#f7a35c,#8085e9,#f15c80,#e4d354,#2b908f,#f45b5b,#91e8e1"を以下に変更
colors:"#00f,#00f,#00f,#00f,#00f,#00f,#00f,#00f,#00f,#00f"

サンプルは以下の通り。

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

 

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

以下を追記する。

rangeSelector : {
	selected : 0,
	buttons: [{
		type: 'day',
		count: 1,
		text: '1s'
	}]
},

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

サンプルは以下の通り。

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

 

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

ソースは以下の通り。

<script>
var data = ([
	[1294617600000,4840,4903,4817,4892],
	[1294704000000,4927,4928,4850,4881],
	[1294790400000,4904,4920,4886,4920],
	[1294876800000,4931,4952,4912,4938],
	[1294963200000,4941,4978,4921,4978],
	[1295308800000,4707,4925,4657,4866],
	[1295395200000,4976,4980,4813,4841],
	[1295481600000,4806,4833,4716,4753],
	[1295568000000,4768,4784,4666,4667],
	[1295827200000,4670,4821,4667,4821],
	[1295913600000,4805,4878,4780,4877],
	[1296000000000,4899,4937,4879,4912],
	[1296086400000,4911,4924,4898,4903],
	[1296172800000,4917,4920,4765,4801],
	[1296432000000,4797,4858,4776,4847],
	[1296518400000,4876,4938,4871,4929],
]);
var data2 = ([
	[1296604800000,4921,4932,4908,4919],
	[1296691200000,4911,4918,4836,4906],
	[1296777600000,4909,4953,4907,4950],
	[1297036800000,4970,5046,4966,5027],
	[1297123200000,5053,5079,5031,5074],
	[1297209600000,5074,5129,5070,5117],
	[1297296000000,5106,5143,4971,5065],
	[1297382400000,5068,5111,5051,5098],
	[1297641600000,5097,5135,5096,5131],
	[1297728000000,5131,5142,5108,5141],
	[1297814400000,5154,5213,5150,5188],
	[1297900800000,5104,5147,5093,5119],
	[1297987200000,5124,5136,4993,5008],
	[1298332800000,4888,4934,4825,4837],
	[1298419200000,4840,4923,4837,4895],
	[1298505600000,4915,4931,4834,4898],
	[1298592000000,4932,4978,4926,4974],
	[1298851200000,5018,5072,5016,5046],
]);

var chart;
chart = Highcharts.stockChart('container', {
	chart: {
		height:400, 
		width:500, 
	},
	series : [{
		type : 'candlestick',
		name : 'chart',
		data : data,
	}], 
	credits: { 
		enabled: false,
	}, 
	scrollbar: false,
	navigator: false,
	tooltip: {
		xDateFormat: '%Y/%m/%d %H:%I'
	},
});

function updateChart(){
	var option = { type : 'candlestick', data: data2, name : 'chart'}
	chart.addSeries(option);
}
setTimeout("updateChart()", 2000);
</script>

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

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

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

 - JavaScript

  関連記事

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

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

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

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

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

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

HTML、javascriptソースの暗号化

サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...

エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法

エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...

時間差をつけて処理する

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

Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法

プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...

Chart.jsでグラフの描写

JavaScriptでグラフを描写する必要があり、普段はHighchartを使用 ...

ページのリロード、ページの戻る

ブラウザのリロードと同じようなボタンを作成してほしいとの 要望があって色々あった ...

jquery.cookie.jsで保存期間を時間指定する方法

jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...