グラフ構成エディタを使用したビジュアリゼーションのカスタマイズ

本稿はLooker Advent Calender 2024、NI+C TeamGCP Advent Calendar 2024の22日目の記事です。

こんにちは、日本情報通信の中島です。

今年もあと残り僅かとなりましたね。みなさん素敵な年を迎えることができるよう、最後まで駆け抜けましょう。

さて、今回は「グラフ構成エディタ」を利用した、ビジュアリゼーションのさらなるカスタマイズについて、私が特に便利だと思ったものを皆さんにご紹介したいと思います。

1．はじめに

Lookerではビジュアリゼーションの編集機能を使って、表内の文字の色や大きさを変えたり、値のラベルを付与したりなど、簡単なカスタマイズであればこちらから行うことが可能です。

ですが、今回はグラフ構成エディタを使用してHighCharts JSONコードを書くことによって、さらにグラフを分かりやすく可視化する方法を説明したいと思います。

前提として、グラフ構成エディタを使用するには、can_override_vis_config 権限が必要ですので、ご注意ください。

グラフの構成エディタを使用する時は、
Explore画面 -> ビジュアリゼーションの編集 -> プロット -> グラフ構成を編集する　から編集可能です。

2．グラフ構成エディタを使用したカスタマイズ例

a.グラフに横ロールを追加する

グラフに表示させる日付の期間が長いと、グラフ上に表示できる領域は決まっているので各列の幅が狭くなり、数値が非常に見づらくなってしまいます。

そこでグラフに横スクロールを追加してみました。
以下の内容で定義可能です。 minWidthでの日付間の幅の広さを指定することができます。

{
  chart: {
    scrollablePlotArea: {
      minWidth: 4000,
      scrollPositionX: 0
    }
  }
}

グラフ画面下部に横スクロールが追加され、日付間の領域も広くなり、売上金額の値ラベルが見やすくなったことが分かります。

b.ツールチップのカスタマイズ

続いてはグラフ上の数値にカーソルをあてたときに表示されるツールチップのカスタマイズです。

今のグラフでは「アイス」「チョコレート」「ガム・キャンディ」の3種類のカテゴリの売上金額が表示されています。

アイスの数値にカーソルを当てると、アイスのツールチップが表示されますが、チョコレートやガム・キャンディの詳細は見ることができません。

そこで一つの数値にカーソルをあてるだけで、全カテゴリの詳細が見れるようにツールチップのカスタマイズを行いました。以下の内容で定義可能です。

  tooltip: {
    format: '<span style="font-size: 1.8em">{key}</span><br/>{#each points}<span style="color:{color}; font-weight: bold;">\u25CF {series.name}: </span>{y:,.0f}<br/>{/each}',
    shared: true
  }

一つのツールチップの中に3カテゴリ全ての詳細を含めることができました。

c.背景色をつける

最後はグラフに背景色を付ける方法です。
単純にグラフ自体に背景色を付ける場合は以下の方法で定義可能です。

  chart: {
    backgroundColor: "色名"
  }

今回は売上金額が15000円を超えた月が一目で分かることができるように、
Y軸の15000から20000の間に背景色を設定しました。以下の内容で定義が可能です。

  yAxis: {
    title: {
      text: '売上金額'
    },
    labels: {
      format: '¥{value:,.0f}' // 円表記のフォーマット
    },
    plotBands: [{
      from: 15000,
      to: 20000,
      color: 'rgba(255, 0, 0, 0.2)' // 背景色の設定
    }]
  }

以上3つをご紹介させていただきました。
3つ全ての定義を含めたビジュアリゼーションのグラフがこちらとなります。
またグラフ上部にタイトルとサブタイトルもつけてみました。

{
  title: {
    text: 'お菓子の売上金額'
  },
  subtitle: {
    text: 'アイス / チョコレート / ガム・キャンディ'
  },
  tooltip: {
    format: '<span style="font-size: 1.8em">{key}</span><br/>{#each points}<span style="color:{color}; font-weight: bold;">\u25CF {series.name}: </span>{y:,.0f}<br/>{/each}',
    shared: true
  },
  chart: {
    scrollablePlotArea: {
      minWidth: 4000,
      scrollPositionX: 0
    }
  },
  series: [{
      name: 'アイス'
    },
    {
      name: 'チョコレート'
    },
    {
      name: 'ガム・キャンディ'
    }
  ],
  yAxis: {
    title: {
      text: '売上金額'
    },
    labels: {
      format: '¥{value:,.0f}' // 円表記のフォーマット
    },
    plotBands: [{
      from: 15000,
      to: 20000,
      color: 'rgba(255, 0, 0, 0.2)' // 背景色の設定
    }]
  }
}

3．まとめ

いかがだったでしょうか。

定義の内容もそこまで複雑ではないので、今のビジュアリゼーションからさらに簡単に分かりやすく視覚化することが出来ると思います。

今回紹介した方法はほんの一部で、HighCharts APIには参考になる定義がたくさん載っていますので、ぜひみなさんのカスタマイズしたビジュアリゼーションを作成していただければと思います。

またこちらのHighcharts GPTでは、作成してみたいグラフをプロンプトに打つと、ChatGPTが実際のチャートを作成してくれますのでこちらもご参考ください。

ここまで読んでいただきありがとうございました。