ローソク足のグラフをJavaScriptで描写する方法(highstock)

株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方法でWebページ上に描写したかった。また、グラフはリアルタイムに更新したかった。調べてみるとhighstockというJavaScriptライブラリが良いらしい。以下に使い方やカスタマイズ方法をメモ。

公式サイト等のリンク

公式サイト

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

基本的な使い方

ソースは以下の通り。

<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,
},

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

以下を追記する。

scrollbar: false,
navigator: false,

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

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

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

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

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

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

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

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

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

グラフの色を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"

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

以下を追記する。

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

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

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

ソースは以下の通り。

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