Vue3 × Highchartsで時系列グラフを表示する方法｜datetime（xAxis）を日本語対応

#プログラム #Vue.js

記事をシェア：

コピー

こんにちは。飯塚です。

Vue3 で Highcharts を使って、時系列のデータを表示させる機能を作成しました。Highchartsは使ったことがあるのですが、xAxis の time:datetime プロパティは使ったことがなく、日本語対応にも手間取ったため、記事にしました。

Vue3 で Highcharts の type:’datetime’ を日本語対応する方法の CodePen サンプルプログラム

まずは CodePen のサンプルをご紹介します。
【CodePen】Vue3 Highcharts 時系列(datetime)グラフ

「Do not enter passwords or personal information on this page.」と表示されて見づらい場合は、リンクを押してCodePenのサイトに移動してください。

以降、ポイントとなるプログラムをピックアップして解説します。

Highcharts xAxis type:’datetime’ の基本設定

まずは日本語対応前に type:’datetime’ を表示するための設定をします。

xAxis: [
  {
    type: 'datetime',
    tickInterval: 30 * 60 * 1000, // 30分間隔
    min: minUtcTimestamp, // 当日の0:00
    max: maxUtcTimestamp, // 当日の23:30
  }
]

type:’datetime’
UNIX時間で管理するので、30分単位、1分単位といった時間の単位が揃わないグラフを共存させたいケースで有効です。

tickInterval
X軸の目盛りの間隔です。「30分」という間隔をミリ秒で指定しています。ちなみに表示横幅が狭いと勝手に1時間目盛になります。

min, max
表示する時間の最小、最大を指定します。変数を使っていますが、詳細は後ほど書きます。

Highchartsの日本語対応1: タイムゾーンの変更

日本語のシステムでHighchartsを使うなら大抵設定するプロパティです。ただ、注意点として xAxis の type ‘datetime’ に影響するため、日本時間の9時間時差を考慮する必要があります。

Highcharts.setOptions({
  time: {
    timezone: 'Asia/Tokyo',
  }
});

Highchartsの日本語対応2: 日本時間時差を考慮して、最小最大の期間を計算する

今回は「00:00 ~ 24:00」のグラフを表示させたかったので、日本時間の9時間時差を考慮したUNIX時間を算出します。

// 最小期間の算出
const minUtcTimestamp = Date.UTC(
  today.getUTCFullYear(),
  today.getUTCMonth(),
  today.getUTCDate(),
  -9, // 日本時間に調整する
  0
);
　
// 最大期間の算出
const maxUtcTimestamp = Date.UTC(
  today.getUTCFullYear(),
  today.getUTCMonth(),
  today.getUTCDate(),
  23-9, // 日本時間に調整する
  0
);

Highchartsの日本語対応3: ツールチップを日本語表記にカスタマイズ

最後はツールチップの表示フォーマット変更です。タイムゾーンを変えただけだと、ツールチップに自動的反映されるわけではないので、日本で一般的な表記にします。

tooltip: {
  // ツールチップの日時フォーマットを明示的に指定
  headerFormat: '{point.x:%Y/%m/%d %H:%M}
',
  pointFormat: '{series.name}: {point.y} mm',
  dateTimeLabelFormats: {
    hour: '%H:%M',
    minute: '%H:%M'
  }
}