Vue3 × Highchartsでグラフにコメントを表示する方法｜annotationsの使い方を解説

#プログラム #Vue.js

記事をシェア：

コピー

こんにちは。飯塚です。

グラフを使っていると、数値の変化のきっかけになった出来事も表示させたいことがあります。例えば、降水量なら台風が発生したタイミング、株価なら影響したニュースがグラフに表示されていたら、数値の変化と出来事の関連性を視覚的に理解しやすくなりますよね。

というわけで、Highchartsを使ってどのように実装できるのか調べて記事にしました。

Highchartsでグラフにコメントを表示するサンプル（Vue3 CodePen）

まずはCodePenのサンプルを紹介します。
【CodePen】Vue3 Highcharts グラフにコメントをつける

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

実装方法は2パターン用意しました。以降、ポイントとなるプログラムをピックアップして解説します。

Highchartsでannotationsを使うための設定方法

コメントを挿入するためには、annotations を使用します。カスタム機能なのでデフォルトでは使用できません。annotations.jsを読み込みます。

src="https://code.highcharts.com/modules/annotations.js"

scriptタグがWordPressだとセキュリティエラーになるので省略しています。

Highchartsでデータに紐づけてコメントを表示する方法

グラフの特定の値に紐づけてコメントを表示させます。

見慣れない書き方ですが、dataにidを付与します。

series: [
  {
    name: "データ",
    data: [1, {y: 3, id: 'comment1'}, 2, 4, 5, 3]
  }
],

idに紐づけたいコメントを書いて、グラフにアノテーションを追加します。

const newAnnotations = {
  labels: [
    {
      point: 'comment1',
      text: 'コメント1'
    }
  ]
};

chart.addAnnotation(newAnnotations);

Highchartsでx, y座標を指定してコメントを表示する方法

グラフの値とは関係なく、コメントを表示させます。コメントしたい出来事やイベントがグラフの値と直接関係ない場合は、こちらを使用します。

dataの書き方は通常通りなので省略します。グラフ値と関係ないので、コメントを描画する位置をx, yで指定します。

const newAnnotations = {
  labels: [
    {
      point: {
        x: 3,
        y: 0,
        yAxis: 0,
        xAxis: 0
      },
      text: "コメント2",
      backgroundColor: "white"
    }
  ]
};

chart.addAnnotation(newAnnotations);

スタイルも変更できるので、例としてbackgroundColorで背景色を白に変えてみました。デフォルトだと背景色が真っ黒なので違和感があるかもしれません。

Highcharts annotationsが表示されない場合の確認ポイント

annotationsを設定してもコメントが表示されない場合は、以下のポイントを確認してください。

annotations.jsが読み込まれているか
scriptタグが使用できない環境（WordPressなど）で制限されていないか
pointに指定したidや座標が正しく設定されているか

annotations.jsが読み込まれていない場合、annotationsは動作しません。また、複数の軸を使用している場合は、xAxis・yAxisのインデックス指定にも注意してください。

まとめ

いかがでしょうか。

Highchartsのカバー範囲の広さにはいつも驚かされますね。グラフでやりたいことは全て揃っているのではないか、と思うぐらいです。今回のアノテーション機能はデータの分析と視覚化に便利そうです。他にも便利な機能があれば記事を書くつもりですので、お役に立てれば幸いです。

《関連記事》