HTML

사용

view: view_name {
  dimension: field_name {
    html: <img src="https://www.brettcase.com/
          product_images/{{ value }}.jpg"/> ;;
  }
}
계층 구조
view
필드 유형
html
가능한 필드 유형
측정기준, 측정기준 그룹, 측정값

수락함
HTML 표현식(Liquid 템플릿 요소를 사용할 수 있음) 뒤에 세미콜론 2개

정의

html 파라미터를 사용하면 필드에 포함될 HTML을 지정할 수 있습니다.

Liquid 변수를 사용하면 일반적으로 해당 필드에 들어가는 값에 액세스할 수도 있습니다. 이를 통해 관련된 다른 Look으로의 링크, 외부 웹사이트 링크, 이미지 등 여러 유용한 기능을 만들 수 있습니다.

HTML 형식은 테이블, 테이블(기존), KPI(단일 값), 단일 값(기존) 차트 시각화와 여러 필드가 결합된 시각화 도움말에서만 렌더링됩니다. html 매개변수로 맵 차트 도움말에 배치된 모든 대화형 콘텐츠는 새로운 대시보드 환경을 사용하는 대시보드에서 액세스할 수 없습니다. Look, Explore, 기존 대시보드에서는 액세스할 수 있습니다.

콘텐츠를 다운로드할 때 HTML 형식은 TXT, CSV, Excel, JSON 등의 텍스트 기반 다운로드 형식에는 적용되지 않습니다.

유효한 HTML 사용

특정한 보안 악용을 방지하기 위해 Looker는 사용할 수 있는 HTML 태그 및 속성과 사용할 수 있는 CSS 속성을 제한합니다. 자세한 내용은 HTML 정리 문서 페이지를 참조하세요.

Liquid 변수

html 매개변수는 Liquid 변수를 지원합니다. 이러한 변수를 최대한 활용하는 방법에 관한 자세한 내용은 Liquid 변수 문서 페이지를 참조하세요.

예시

다음은 html 필드 매개변수를 사용하는 몇 가지 예시입니다.

HTML을 사용하여 시각화에서 필드 값의 글꼴과 색상을 맞춤설정하는 방법에 관한 추가 예시는 Looker에서 시각화 최대한 활용하기 설명서의 조건부 서식 맞춤설정 페이지와 시각화 도움말 맞춤설정 페이지에서 확인할 수 있습니다.

html 파라미터에서 Liquid 변수 사용

이 예시에서는 대부분의 Liquid 변수가 html 매개변수에 표시되는 방식을 보여줍니다. total_order_amount 정의를 고려해 보세요.

measure: total_order_amount {
  type: sum
  sql: ${order_amount} ;;
  value_format: "0.00"
  html:
    <ul>
      <li> value: {{ value }} </li>
      <li> rendered_value: {{ rendered_value }} </li>
      <li> linked_value: {{ linked_value }} </li>
      <li> link: {{ link }} </li>
      <li> model: {{ _model._name }} </li>
      <li> view: {{ _view._name }} </li>
      <li> explore: {{ _explore._name }} </li>
      <li> field: {{ _field._name }} </li>
      <li> dialect: {{ _dialect._name }} </li>
      <li> access filter: {{ _access_filters['company.name'] }} </li>
      <li> user attribute: {{ _user_attributes['region'] }} </li>
      <li> query timezone: {{ _query._query_timezone }} </li>
      <li> filters: {{ _filters['order.total_order_amount'] }} </li>
    </ul> ;;
}

total_order_amount에 표시되는 셀 값은 다음과 같습니다.

  • value: 8521935
  • rendered_value: 8,521,935.00
  • linked_value: 8,521,935.00
  • link: /explore/thelook/orders?fields=orders.order_amount&limit=500
  • model: thelook
  • view: orders
  • explore: order_items
  • field: total_order_amount
  • dialect: mysql
  • access filter: altostrat.com
  • user attribute: northeast
  • query timezone: America/Los_Angeles
  • filters: NOT NULL

측정값 조건부 서식 지정

값에 따라 개수의 조건부 서식을 지정합니다.

measure: formatted_count {
  type: count
  html:
    {% if value > 100 %}
      <span style="color:darkgreen;">{{ rendered_value }}</span>
    {% elsif value > 50 %}
      <span style="color:goldenrod;">{{ rendered_value }}</span>
    {% else %}
      <span style="color:darkred;">{{ rendered_value }}</span>
    {% endif %} ;;
}

html 파라미터로 데이터 탐색

HTML 형식은 테이블, 테이블(기존), KPI(단일 값) 차트 시각화와 여러 필드가 결합된 시각화 도움말에서만 렌더링됩니다. html 매개변수로 맵 차트 도움말에 배치된 모든 대화형 콘텐츠는 새로운 대시보드 환경을 사용하는 대시보드에서 액세스할 수 없습니다. Look, Explore, 기존 대시보드에서는 액세스할 수 있습니다.

데이터에 각 주문의 상태를 제공하는 status라는 필드가 있다고 가정해 보세요. status에 가능한 값은 다음과 같습니다.

  • Paid
  • Shipped
  • Returned

데이터를 탐색하는 동안 각 상태에 별도의 배경 색상을 지정할 수 있습니다. 이는 측정기준의 html: 파라미터에서 Liquid html을 사용하여 수행할 수 있습니다. 다음과 같이 표시됩니다.

dimension: status {
  sql: ${TABLE}.status ;;
  html: {% if value == 'Paid' %}
      <p style="color: black; background-color: lightblue; font-size:100%; text-align:center">{{ rendered_value }}</p>
    {% elsif value == 'Shipped' %}
      <p style="color: black; background-color: lightgreen; font-size:100%; text-align:center">{{ rendered_value }}</p>
    {% else %}
      <p style="color: black; background-color: orange; font-size:100%; text-align:center">{{ rendered_value }}</p>
    {% endif %}
;;
}

표에서 각 셀의 배경 색상은 status 필드의 값에 따라 달라집니다. 값이 Paid이면 배경 색상이 연한 파란색, Shipped이면 연한 녹색, 그 외의 값이면 주황색이 됩니다. 예를 들어 표에 Returned 값이 포함된 경우 해당 셀의 배경은 주황색이 됩니다.

동일한 구문을 사용하여 셀 값에 따라 아이콘 또는 이미지를 추가할 수 있습니다.

dimension: status {
    sql: ${TABLE}.status ;;
    html: {% if value == 'Shipped' or value == 'Complete' %}
         <p><img src="https://findicons.com/files/icons/573/must_have/48/check.png" alt="" height="20" width="20">{{ rendered_value }}</p>
      {% elsif value == 'Processing' %}
        <p><img src="https://findicons.com/files/icons/1681/siena/128/clock_blue.png" alt="" height="20" width="20">{{ rendered_value }}</p>
      {% else %}
        <p><img src="https://findicons.com/files/icons/719/crystal_clear_actions/64/cancel.png" alt="" height="20" width="20">{{ rendered_value }}</p>
      {% endif %}
;;
}

표에는 다음과 같이 표시됩니다.

주문 항목 상태 주문 항목 수
취소됨 아이콘취소됨 6,316
완료 아이콘완료 232,791
처리 중 아이콘처리 중 809
취소됨 아이콘반품됨 2,354
완료 아이콘발송됨 1,474

제품 이미지 생성 중

다음은 제품 ID를 기반으로 <img> 태그를 사용하여 Looker에 제품 사진을 추가하는 방법의 예시입니다.

dimension: product_image {
  sql: ${product_id} ;;
  html: <img src="https://www.altostrat.com/product_images/{{ value }}.jpg" /> ;;
}

html 매개변수를 사용하여 출력을 형식 지정할 때 드릴다운 링크를 유지하려면 HTML 태그 <a href="#drillmenu" target="_self">를 포함하면 됩니다. 예를 들면 다음과 같습니다.

measure: count {
  type: count
  drill_fields: [detail*]
  html:
    <a href="#drillmenu" target="_self">
      {% if value > 10000 %}
        <span style="color:#42a338;">{{ rendered_value }}</span>
      {% elsif value > 5000 %}
        <span style="color:#ffb92e;">{{ rendered_value }}</span>
      {% else %}
        <span style="color:#fa4444;">{{ rendered_value }}</span>
      {% endif %}
    </a>;;
}