勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

   2024/03/13  JavaScript

株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方法で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関数内で最初のデータと追加するデータを比較し、最初のデータのタイムスタンプ以下のデータは削除し、それ以外のデータのみ追加するという形がよさそう。

 - JavaScript

  関連記事

表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法

どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...

JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法

JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...

JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)

JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...

Dexie.jsを利用してIndexedDBを取り扱う方法

IndexedDBを用いて色々するという案件を見かけたが、そもそもIndexed ...

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

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