本ページでは、ビジュアリゼーション内のツールチップをマウスオーバーした時に外のフィールドの値を表示する方法を説明します。(🇺🇸本記事は、このヘルプ記事を翻訳したものになります)
Lookerビジュアライゼーションでは、データポイントにカーソルを合わせると、ツールチップにそのデータポイントのx軸とy軸のフィールドの値が表示されます。
ただし、ツールチップの他のフィールドの値を表示したい場合もあります。この場合は、html パラメータ内でLiquid変数を使用します。 Liquidは、Lookerでより動的なコンテンツを作成するために使用できるテンプレート言語です。 ただし、これを掘り下げる前に、Liquid with Lookerの使用に関する基本的な概念を理解する必要があります。この基本的な概念を理解するには、HTMLパラメーターでのLiquid変数の使用および、Liquid変数リファレンス のドキュメンテーションページを参照してください。
以下の例を参照してください。その後、これをどのように行うかを説明します。
次のパターンを使用して、ビジュアリゼーションで値の任意の組み合わせを表示します。ただし、ビジュアリゼーションを検討するときは、次の重要な点に留意してください。
html
パラメータは、Y軸として使用されるメジャーに利用します。sql
ステートメントの値である必要があります。この特定の例では、データセットをグループ化するためにgross_margin_tier
ディメンションと、計算のためにtotal_gross_margin
メジャーを type:sumとして作成しました。
Liquid変数_rendered_valueを使用して、小数点2桁のtotal_gross_marginと、percent_of_total_gmの両方のフォーマットされた値を表示しました。 これらの値は、htmlパラメーターの下に表示されます。
ここでの目標は、y軸を total_gross_margin
と区別しながら、ホバーオーバー内で各層のtotal_gross_margin
の percent_of_total_gm
を表示することです。
上記のビジュアリゼーションと表の例のコードは次のとおりです。
dimension: gross_margin_tier {
type: tier
sql: ${gross_margin} ;;
tiers: [0, 50, 100, 200, 400]
}
measure: percent_of_total_gm {
type: percent_of_total
sql: ${total_gross_margin};;
}
measure: total_gross_margin {
type: sum
value_format_name: decimal_2
sql: ${gross_margin} ;;
html: {{ rendered_value }} || {{ percent_of_total_gm._rendered_value }} of total>> ;; ## here we use || to concatenate the values
}