Highcharts.js 数値表示覚え書き、カンマや単位のオプションと関数

2018年2月18日2018年12月18日Java Script

よく忘れるカンマ、単位関連オプションのメモです。

カンマ・単位

setOptions で設定しておけば、カンマだけでなく単位も勝手に付与されます。

ただし単位は英語なので thoudsand, million となってしまいます。表記を日本語にするには numericSymbols で予め指定しておく必要があります。

Highcharts.setOptions({
lang: {
thousandsSep: ',',
numericSymbols: ['千', '百万', '十億', '兆', '千兆', '百京']
}
});

これで単位の付与はされます。しかし formatter を使うとこの設定は無視され、カンマはつかなくなります。

format

ツールチップとプロットオプションでは{point.y:デリミタ（カンマ）.少数以下f } の形で指定できます。

tooltip: {
headerFormat: '{point.key}月降雨量',
pointFormat: "Value: {point.y:,.2f} mm"
},

pointFormat は系列ごとに表示するデータを設定します。

headerFormat は系列ごとに表示される pointFormat の前につける情報を設定できます。headerFormat を使えば単位のついていないX軸の値を単位つきで表示させることもできます。。

formatter: function

formatter は軸とプロットでのデータ参照で使える値が異なってよく間違えるので逆引きにしています。

formatter を使うと、setOptions のカンマ設定が無効になるので、Highcharts.numberFormat で対処

formatter: function() {return Highcharts.numberFormat(Math.round(this.y/10000), 0, '', ',') + '万円' }

参照Highcharts JSで数値に桁区切りのカンマを挿入する – Qiita

データラベル

ツールチップやシリーズのデータラベルの整形につかうフォーマット用コールバック関数。format では対応できない時。

https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.format.html

例）ツールチップ

tooltip:
{
shared: true,useHTML: true,
formatter: function () {return this.y / 1000000 + '百万円';},
},

例）プロットオプションでシリーズにデータを表示

plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function () {return this.y / 1000000 + '百万円';}
}
}
},

y軸のラベル（単位）

例）

yAxis:[
{
labels: {
formatter: function () {return this.value / 1000000 + ' 百万円';},
},
title: {text: '売上高（百万）'},
},

X軸のラベル

X軸、つまり横軸のフォーマットは基本的にY軸と同じく

xAxis:[{labels: {formatter:retuen value}}]

の形。

X軸は時間のケースにも対応しています。

日付フォーマット

X軸がタイムスタンプなら、自動で日付を表示してくれます。

xAxis: {
type: 'datetime',
labels: {
format: '{value: %Y/%y}',
align: 'right',
rotation: -30
}

一覧はxAxis.dateTimeLabelFormatsにあるのですが、weekは何週目かという意味では使えません。

millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'

自分でフォーマットする

週がその年の何週目かのように定義されていない場合は、自分でフォーマットを定義するしかないようです。

Highcharts.dateFormats = {
W: function (timestamp) {
var date = new Date(timestamp),
day = date.getUTCDay() === 0 ? 7 : date.getUTCDay(),
dayNumber;
date.setDate(date.getUTCDate() + 4 – day);
dayNumber = Math.floor((date.getTime() – new Date(date.getUTCFullYear(), 0, 1, -6)) / 86400000);
return 1 + Math.floor(dayNumber / 7);
}
};

%Wで何週目かが表せるようになります。

最大値最小値指定と目盛線

最小値、最大値は min, max で指定。ただし、最大値は目盛り間隔に左右されるため、最大値が31万のグラフで max を320000にしても、35万までの範囲のグラフが作成されます。

目盛間隔は tickInterval,  minorTickInterval で調整。

yAxis:{
min:0,
max:300000,
tickInterval: 100000,
minorTickInterval: 50000,
title: {text: ''},
labels: {
formatter: function () {return this.value / 10000 + '万人';},
},
},