Highstock -> ローソク足（CandleStick）
【環境】
Highstock 2.1.4
Highstock 2.1.4
tooltip
ツールチップのカスタマイズ。
formatter
- var options = {
- tooltip: {
- formatter: function() {
- var s = '';
- $.each( this.points, function( i, point ) {
- s += moment.utc( point.x ).format( 'YYYY-MM-DD' ) + '<br />';
- s += '<b>' + moment.utc( point.x ).format( 'hh:mm' ) + '</b><br />';
- s += '始値：' + point.point.open + '<br />';
- s += '高値：' + point.point.high + '<br />';
- s += '安値：' + point.point.low + '<br />';
- s += '終値：' + point.point.close;
- });
- return s;
- },
- },
- };
i
引数の i は、index
複数データ系列（series）の場合には、index で、どのデータ系列の値かを判別。
- $.each( this.points, function( i, point ) {
- if ( i == 0 ) {
- s += moment.utc( point.x ).format( 'YYYY-MM-DD' ) + '<br />';
- s += '<b>' + moment.utc( point.x ).format( 'hh:mm' ) + '</b><br />';
- s += '始値：' + point.point.open + '<br />';
- s += '高値：' + point.point.high + '<br />';
- s += '安値：' + point.point.low + '<br />';
- s += '終値：' + point.point.close + '<br />';
- }
- else {
- s += '売買高：' + point.point.y;
- }
- });
point
こちらの場合は、始値などは point.open では undefined となり
point.point.open でないと取れなかった。
pointFormat
- var options = {
- tooltip: {
- pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}:<br/>始値: {point.open:.2f} <br> 高値: {point.high} <br> 安値: {point.low} <br> 終値: {point.close}' ,
- },
- };
{point.open:.2f} とすることで、有効桁数が小数点第２位までとなるみたい。
{point.x} とすることで、X軸値を取ることができたけど
タイムスタンプの整形する方法がわからなかった。
参考サイト
Highcharts：OHLC and Candlestick Localization
stackoverflow：Highstock – How can i display the open, high, low, close in the line or area charts tooltip