ビジュアリゼーション ツールチップには、デフォルトで選択したディメンションおよびメジャーの値が表示され、ユーザーがデータの 1 点の重要性を理解することをサポートします。
たとえば、州ごとにグループ化された合計総利益に基づくマップ ビジュアリゼーションのツールチップでは、ユーザーがカリフォルニア州にカーソルを合わせると、両方のフィールドの値を表示します。
しかし、デフォルト以外のフィールドをツールチップに含めて、ユーザーが他の場所を探すことなくデータポイントに関する詳細な情報やコンテキストを取得できるようにするにはどうすればよいでしょうか。
ツールチップをカスタマイズして、Explore クエリにないフィールドを含む、複数の指定フィールドの値を表示できます。
構成要素
- Liquid 変数 - Liquid 変数は、既存の Explore クエリと連携して他のフィールドの値をレンダリングします。
html
パラメータ - 測定のhtml
パラメータで定義されたフィールドは、ユーザーがビジュアリゼーションにカーソルを合わせるとツールチップに表示されます。- ビジュアリゼーション - ユーザーが特定のビジュアリゼーション タイプのデータポイントにカーソルを合わせると、ツールチップが表示されます。
前提条件
ツールチップをカスタマイズするには、以下のものが必要です。
- Explore を作成する権限と LookML を開発する権限。
- SQL と LookML の開発に関する知識
- Looker での Liquid の使用と、HTML コーディングの基本的な知識。必要な背景情報については、
html
ドキュメント ページのhtml
パラメータで Liquid 変数を使用するをご覧ください。 - コンテンツを保存する権限(ビジュアリゼーションを Look やダッシュボードとして保存する場合)
ツールチップのカスタマイズに関する考慮事項
ツールチップをカスタマイズする場合は、次の点を考慮することが重要です。
html
パラメータの値は、ビジュアリゼーションの Y 軸になります。- Y 軸に表示する値は、measure の
sql
パラメータの値である必要があります。 - 書式設定された measure(
type: percent_of_total
の measure、またはvalue_format_name
かvalue_format
パラメータの measure)を使用している場合は、レンダリングされた値{{ field_name._rendered_value }}
に Liquid 構文を使用していることを確認します(field_name
は、メジャーまたはディメンションの実際の名前です)。
例
デフォルトでは、ビジュアリゼーション データポイントのツールチップには、合計総利益と州の値が含まれます。しかし、地図上に表示されてなく、Explore クエリにも含まれていない追加情報をユーザーに提供する場合はどうでしょうか。[State] ではなく [Percent of Total Gross Margin] というフィールドに値を含める場合はどうでしょうか。[合計総利益率] を含めると、個々のデータポイントの [合計総利益率] とデータセットの合計総利益を比較できます。
ツールチップをカスタマイズするには、次の手順を行います。
measure: total_gross_margin {
type: sum
value_format_name: decimal_2
sql: ${gross_margin} ;;
html: {{ rendered_value }} | {{percent_of_gross_margin._rendered_value }} of total ;;
}
Development Mode で、カスタマイズするフィールドの LookML 定義に移動します。
Explore からフィールドの LookML 定義に直接移動できます。
元のフィールドに加えて、ツールチップに含めるフィールドと値を決定します。たとえば、合計総利益率などです。
Explore クエリで参照され、ツールチップに表示される元の measure に
html
パラメータを追加します。この場合、現在 Explore クエリに含まれ、ツールチップに表示されている measure は、合計総利益です。html
パラメータで、既存の measure 値に追加のフィールドを追加する Liquid 変数を含む式を作成します。- この例では、Liquid 変数
_rendered_value
を使用して Looker 形式の値を表示します。たとえば、total_gross_margin
は小数点以下 2 桁の Looker 形式を使用し、percent_of_total_gross_margin
は小数点以下 2 桁の百分率の Looker 形式を使用します。 - パイプ文字(
|
)を使用して、異なるフィールドの値を区切ることができます。 - また、ツールチップに表示される他の値の意味を明確にするために、他の単語を追加することもできます。この場合は、百分率値の意味を明確にするために
of total
が追加されます。
- この例では、Liquid 変数
保存して検証し、期待通りに動作することを確認したら、コードを本番環境にプッシュしてください。
ユーザーがツールチップを含むデータポイントにカーソルを合わせると、2 つの値(そのデータポイントの total_gross_margin
値と、対応する percent_of_total_gross_margin
値)が表示されるようにしました。
次のステップ
カスタマイズしたツールチップを含むビジュアリゼーションを作成したら、それを他のユーザーと共有できます。