시각화 및 쿼리 속성 테이블

Visualization

이 구성요소는 쿼리 컨텍스트에서 데이터와 구성을 가져와서 적절한 시각화를 렌더링합니다. 속성에 숫자 픽셀 값을 전달하여 너비와 높이를 맞춤설정할 수 있습니다.

속성	값	참고
width	숫자(픽셀)	속성이 정의되지 않은 경우 기본값은 100%입니다.
height	숫자(픽셀)	속성이 정의되지 않은 경우 기본값은 500픽셀입니다.
chartTypeMap	키/값 객체	어댑터 시스템이 특정 차트 유형 값을 발견할 때 렌더링할 구성요소를 정의하는 키/값 객체를 허용합니다. 이를 사용하여 Looker의 기본 차트를 재정의하거나 어댑터 시스템에 새 차트 유형을 추가할 수 있습니다.

사용 예시:

import { Visualization, Query } from '@looker/visualizations'
import { MyCustomRadar } from '../MyCustomRadar'

<Query query='12345' config={{ type: 'radar'}}>
   <Visualization
      width={1000}
      height={500}
      chartTypeMap={{ radar: MyCustomRadar}}
    />
</Query>

Query

Query는 자바스크립트 API와 통합되어 요청/응답 주기를 처리하고 쿼리 ID 또는 qid 값으로 쿼리 응답을 가져옵니다. 시각화 구성 재정의를 전달하여 API 응답과 병합하고 모든 데이터를 React 컨텍스트에 로드할 수 있습니다.

속성	값	참고
query	숫자 | 문자열	Explore URL의 qid 속성 뒤에 오는 Query.client_id, 3fdrdE0b3ATltUvXBaSOPN 또는 숫자 쿼리 ID(1234)를 수락할 수 있습니다. 숫자 쿼리 ID에 대한 액세스 권한이 있으면 이 값부터 시작하여 서버 요청 하나를 추가로 저장할 수 있습니다. Query는 query 속성 또는 dashboard 속성을 허용하지만 둘 다 허용하지는 않습니다.
dashboard	숫자	숫자 대시보드 ID(1234)를 허용할 수 있습니다. 숫자 대시보드 ID에 대한 액세스 권한이 있으면 이 값부터 시작하여 서버 요청 하나를 추가로 저장할 수 있습니다. dashboard는 LookML 대시보드의 문자열 ID를 허용하지 않습니다. Query는 query 속성 또는 dashboard 속성을 허용하지만 둘 다 허용하지는 않습니다.
config	type 값에 따라 다음 속성을 허용합니다. type, legend, positioning, render_null_values, tooltips, series, x_axis, y_axis 지원되는 값은 이 페이지의 뒷부분에 있는 차트별 문서를 참조하세요.	차트의 구성 설정을 설정하고 재정의합니다.
LoadingIndicator	구성요소 참조	마운트되지 않은 구성요소 참조를 허용합니다. 기본값: ProgressCircular

import { Visualization, Query } from '@looker/visualizations'
import { ProgressCircular } from '@looker/components'

<Query
  query='12345'
  config={{
      /* specific properties described below */
  }}
  LoadingIndicator={ProgressCircular}
>
  <Visualization />
</Query>

영역 차트 속성

다음은 영역 차트의 config 속성입니다.

속성	값	참고
type	'area'
legend	false(사용 중지) 또는 { position: 'left' | 'bottom' | 'right' | 'top' }	범례 위치를 설정하거나 범례를 false로 설정하여 사용 중지합니다. 기본값: { position: 'bottom' }
positioning	'overlay' | 'stacked' | 'percent'	차트 스택 모드. 기본값: 'overlay'
render_null_values	불리언	null 값을 0으로 처리합니다. 기본값: false
tooltips	불리언	데이터 포인트 위로 마우스를 가져가면 표시되는 도움말을 사용 또는 사용 중지합니다. 기본값: true
series	view_name.field_name 형식의 계열	구성 옵션 및 사용 예시는 계열 섹션을 참조하세요.
x_axis	x축 구성	구성 옵션 및 사용 예시는 x축 섹션을 참조하세요.
y_axis	y축 구성	구성 옵션 및 사용 예시는 y축 섹션을 참조하세요.

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'area',
    legend: { position: 'left' },
    positioning: 'stacked',
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

series 속성은 응답의 특정 계열을 재정의하는 계열 구성 배열 또는 이름이 지정된 객체를 허용할 수 있습니다.

속성	값	참고
color	문자열	16진수 코드
label	문자열
line_width	숫자	선의 획 너비를 픽셀 단위로 설정합니다. 기본값: 3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	점 모양을 설정합니다. 기본값: 'circle'
style	'none' | 'filled' | 'outline'	점 스타일을 설정합니다. 기본값: 'none'(점 사용 중지)
visible	불리언	데이터 계열을 표시하거나 숨깁니다. 기본값: true

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'area',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
      }
    }
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'area',
    series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
  }}
>
  <Visualization />
</Query>

x_axis

현재 차트에서 단일 x축만 지원하지만 API는 미래 경쟁력이 있으며 여러 축의 구성을 지원하도록 구조화되어 있습니다.

속성	값	참고
gridlines	불리언	세로 격자선을 표시하거나 숨깁니다. 기본값: false
label	false(라벨 숨기기) | 문자열(렌더링할 값)	x축 라벨로 렌더링할 값을 설정합니다. 기본값: false(라벨 없음)
reversed	불리언	데이터 포인트의 순서를 반대로 합니다. 기본값: false
values	불리언	축을 따라 렌더링된 값을 표시하거나 숨깁니다. 기본값: true

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'area',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

현재 차트에서 단일 y축만 지원하지만 API는 미래 경쟁력이 있으며 여러 축의 구성을 지원하도록 구조화되어 있습니다.

속성	값	참고
gridlines	불리언	세로 격자선을 표시하거나 숨깁니다. 기본값: false
label	false(라벨 숨기기) | 문자열(렌더링할 값)	y축 라벨로 렌더링할 값을 설정합니다. 기본값: false(라벨 없음)
range	[숫자(분) | 'auto', 숫자(최대) | 'auto']	y축의 최솟값과 최댓값을 설정합니다. 최소값을 'auto'로 설정하면 0으로, 최댓값을 'auto'로 설정하면 세트의 최대 데이터 포인트 값으로 기본 설정됩니다. 기본값: ['auto' | 'auto']
values	불리언	축을 따라 렌더링된 값을 표시하거나 숨깁니다. 기본값: true

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'area',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [50, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

막대 그래프 및 열 차트 속성

다음은 막대 그래프 및 열 차트의 config 속성입니다.

속성	값	참고
type	'bar' | 'column'
legend	false(사용 중지) 또는 { position: 'left' | 'bottom' | 'right' | 'top' }	범례 위치를 설정하거나 범례를 false로 설정하여 사용 중지합니다. 기본값: { position: 'bottom' }
positioning	'grouped' | 'stacked' | 'percent'	차트 스택 모드. 기본값: 'overlay'
tooltips	불리언	데이터 포인트 위로 마우스를 가져가면 표시되는 도움말을 사용 또는 사용 중지합니다. 기본값: true
series	view_name.field_name 형식의 계열	구성 옵션 및 사용 예시는 계열 섹션을 참조하세요.
x_axis	x축 구성	구성 옵션 및 사용 예시는 x축 섹션을 참조하세요.
y_axis	y축 구성	구성 옵션 및 사용 예시는 y축 섹션을 참조하세요.

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'bar',
    legend: { position: 'left' },
    positioning: 'stacked',
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

series 속성은 응답의 특정 계열을 재정의하는 계열 구성 배열 또는 이름이 지정된 객체를 허용할 수 있습니다.

속성	값	참고
color	문자열	16진수 코드
label	문자열
visible	불리언	데이터 계열을 표시하거나 숨깁니다. 기본값: true

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'column',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        visible: false,
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'column',
    series: [{ color: '#4285F4', label: 'Total Orders', visible: false }],
  }}
>
  <Visualization />
</Query>

x_axis

현재 차트에서 단일 x축만 지원하지만 API는 미래 경쟁력이 있으며 여러 축의 구성을 지원하도록 구조화되어 있습니다.

속성	값	참고
gridlines	불리언	세로 격자선을 표시하거나 숨깁니다. 기본값: false
label	false(라벨 숨기기) | 문자열(렌더링할 값)	x축 라벨로 렌더링할 값을 설정합니다. 기본값: false(라벨 없음)
reversed	불리언	데이터 포인트의 순서를 반대로 합니다. 기본값: false
values	불리언	축을 따라 렌더링된 값을 표시하거나 숨깁니다. 기본값: true

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'column',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

현재 차트에서 단일 y축만 지원하지만 API는 미래 경쟁력이 있으며 여러 축의 구성을 지원하도록 구조화되어 있습니다.

속성	값	참고
gridlines	불리언	세로 격자선을 표시하거나 숨깁니다. 기본값: false
label	false(라벨 숨기기) | 문자열(렌더링할 값)	y축 라벨로 렌더링할 값을 설정합니다. 기본값: false(라벨 없음)
range	[숫자(분) | 'auto', 숫자(최대) | 'auto']	y축의 최솟값과 최댓값을 설정합니다. 최소값을 'auto'로 설정하면 0으로, 최댓값을 'auto'로 설정하면 세트의 최대 데이터 포인트 값으로 기본 설정됩니다. 기본값: ['auto' | 'auto']
values	불리언	축을 따라 렌더링된 값을 표시하거나 숨깁니다. 기본값: true

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'bar',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

선 차트 속성

다음은 선 차트의 config 속성입니다.

속성	값	참고
type	'line'
legend	false(사용 중지) 또는 { position: 'left' | 'bottom' | 'right' | 'top' }	범례 위치를 설정하거나 범례를 false로 설정하여 사용 중지합니다. 기본값: { position: 'bottom' }
render_null_values	불리언	null 값을 0으로 처리합니다. 기본값: false
tooltips	불리언	데이터 포인트 위로 마우스를 가져가면 표시되는 도움말을 사용 또는 사용 중지합니다. 기본값: true
series	view_name.field_name 형식의 계열	구성 옵션 및 사용 예시는 계열 섹션을 참조하세요.
x_axis	x축 구성	구성 옵션 및 사용 예시는 x축 섹션을 참조하세요.
y_axis	y축 구성	구성 옵션 및 사용 예시는 y축 섹션을 참조하세요.

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'line',
    legend: { position: 'left' },
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

series 속성은 응답의 특정 계열을 재정의하는 계열 구성 배열 또는 이름이 지정된 객체를 허용할 수 있습니다.

속성	값	참고
color	문자열	16진수 코드
label	문자열
line_width	숫자	선의 획 너비를 픽셀 단위로 설정합니다. 기본값: 3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	점 모양을 설정합니다. 기본값: 'circle'
style	'none' | 'filled' | 'outline'	점 스타일을 설정합니다. 기본값: 'none'(점 사용 중지)
visible	불리언	데이터 계열을 표시하거나 숨깁니다. 기본값: true

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'line',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'line',
    series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
  }}
>
  <Visualization />
</Query>

x_axis

현재 차트에서 단일 x축만 지원하지만 API는 미래 경쟁력이 있으며 여러 축의 구성을 지원하도록 구조화되어 있습니다.

속성	값	참고
gridlines	불리언	세로 격자선을 표시하거나 숨깁니다. 기본값: false
label	false(라벨 숨기기) | 문자열(렌더링할 값)	x축 라벨로 렌더링할 값을 설정합니다. 기본값: false(라벨 없음)
reversed	불리언	데이터 포인트의 순서를 반대로 합니다. 기본값: false
values	불리언	축을 따라 렌더링된 값을 표시하거나 숨깁니다. 기본값: true

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'line',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

현재 차트에서 단일 y축만 지원하지만 API는 미래 경쟁력이 있으며 여러 축의 구성을 지원하도록 구조화되어 있습니다.

속성	값	참고
gridlines	불리언	세로 격자선을 표시하거나 숨깁니다. 기본값: false
label	false(라벨 숨기기) | 문자열(렌더링할 값)	y축 라벨로 렌더링할 값을 설정합니다. 기본값: false(라벨 없음)
range	[숫자(분) | 'auto', 숫자(최대) | 'auto']	y축의 최솟값과 최댓값을 설정합니다. 최소값을 'auto'로 설정하면 0으로, 최댓값을 'auto'로 설정하면 세트의 최대 데이터 포인트 값으로 기본 설정됩니다. 기본값: ['auto' | 'auto']
values	불리언	축을 따라 렌더링된 값을 표시하거나 숨깁니다. 기본값: true

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'line',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

분산형 차트 속성

다음은 분산형 차트의 config 속성입니다.

속성	값	참고
type	'scatter'
legend	false(사용 중지) 또는 { position: 'left' | 'bottom' | 'right' | 'top' }	범례 위치를 설정하거나 범례를 false로 설정하여 사용 중지합니다. 기본값: { position: 'bottom' }
render_null_values	불리언	null 값을 0으로 처리합니다. 기본값: false
tooltips	불리언	데이터 포인트 위로 마우스를 가져가면 표시되는 도움말을 사용 또는 사용 중지합니다. 기본값: true
series	view_name.field_name 형식의 계열	구성 옵션 및 사용 예시는 계열 섹션을 참조하세요.
x_axis	x축 구성	구성 옵션 및 사용 예시는 x축 섹션을 참조하세요.
y_axis	y축 구성	구성 옵션 및 사용 예시는 y축 섹션을 참조하세요.

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'scatter',
    legend: { position: 'left' },
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

series 속성은 응답의 특정 계열을 재정의하는 계열 구성 배열 또는 이름이 지정된 객체를 허용할 수 있습니다.

속성	값	참고
color	문자열	16진수 코드
label	문자열
line_width	숫자	분산형 차트에서 점의 크기를 설정하는 데 사용됩니다. 이를 각 점의 윤곽선 값으로 생각하세요. 기본값: 3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	점 모양을 설정합니다. 기본값: 'circle'
style	'none' | 'filled' | 'outline'	점 스타일을 설정합니다. 기본값: 'none'(점 사용 중지)
size_by	false | 문자열	각 점의 크기를 보정할 계열 이름입니다. 동적 점 크기 조정을 사용 중지하려면 false로 설정합니다. 기본값: false
visible	불리언	데이터 계열을 표시하거나 숨깁니다. 기본값: true

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'scatter',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
        size_by: 'orders.count',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
    query='12345'
    config={{
      type: 'scatter',
      series: [
        {
          color: '#4285F4',
          label: 'Total Orders',
          shape: 'square',
          size_by: 'orders.count',
        },
      ],
    }}
  >
    <Visualization />
  </Query>

x_axis

현재 차트에서 단일 x축만 지원하지만 API는 미래 경쟁력이 있으며 여러 축의 구성을 지원하도록 구조화되어 있습니다.

속성	값	참고
gridlines	불리언	세로 격자선을 표시하거나 숨깁니다. 기본값: false
label	false(라벨 숨기기) | 문자열(렌더링할 값)	x축 라벨로 렌더링할 값을 설정합니다. 기본값: false(라벨 없음)
reversed	불리언	데이터 포인트의 순서를 반대로 합니다. 기본값: false
values	불리언	축을 따라 렌더링된 값을 표시하거나 숨깁니다. 기본값: true

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'scatter',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

현재 차트에서 단일 y축만 지원하지만 API는 미래 경쟁력이 있으며 여러 축의 구성을 지원하도록 구조화되어 있습니다.

속성	값	참고
gridlines	불리언	세로 격자선을 표시하거나 숨깁니다. 기본값: false
label	false(라벨 숨기기) | 문자열(렌더링할 값)	y축 라벨로 렌더링할 값을 설정합니다. 기본값: false(라벨 없음)
range	[숫자(분) | 'auto', 숫자(최대) | 'auto']	y축의 최솟값과 최댓값을 설정합니다. 최소값을 'auto'로 설정하면 0으로, 최댓값을 'auto'로 설정하면 세트의 최대 데이터 포인트 값으로 기본 설정됩니다. 기본값: ['auto' | 'auto']
values	불리언	축을 따라 렌더링된 값을 표시하거나 숨깁니다. 기본값: true

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'scatter',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

단일 값 차트 속성

다음은 단일 값 차트의 config 속성입니다.

속성	값	참고
type	'single_value'

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

<Query query='12345' config={{ type: 'single_value' }}>
  <Visualization />
 </Query>

스파크라인 차트 속성

다음은 스파크라인 차트의 config 속성입니다.

속성	값	참고
type	'sparkline'
render_null_values	불리언	null 값을 0으로 처리합니다. 기본값: false
series	view_name.field_name 형식의 계열	구성 옵션 및 사용 예시는 계열 섹션을 참조하세요.
y_axis	y축 구성	구성 옵션 및 사용 예시는 y축 섹션을 참조하세요.

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query="12345"
  config={{ type: 'sparkline', render_null_values: true }}
>
  <Visualization />
</Query>

series

스파크라인은 기본적으로 단일 계열만 지원하지만 라이브러리의 다른 차트 유형과 일관성을 유지하기 위해 명명된 또는 배열 계열 재정의와 관련된 API 패턴을 유지합니다.

속성	값	참고
color	문자열	16진수 코드
line_width	숫자	선의 획 너비를 픽셀 단위로 설정합니다. 기본값: 3

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'sparkline',
    series: {
      'orders.count': {
        color: '#4285F4',
        line_width: 10,
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'scatter',
    series: [
        {
          color: '#4285F4',
          line_width: 10,
        },
      ],
  }}
>
  <Visualization />
</Query>

y_axis

현재 차트에서 단일 y축만 지원하지만 API는 미래 경쟁력이 있으며 여러 축의 구성을 지원하도록 구조화되어 있습니다.

속성	값	참고
range	[숫자(분) | 'auto', 숫자(최대) | 'auto']	y축의 최솟값과 최댓값을 설정합니다. 최소값을 'auto'로 설정하면 0으로, 최댓값을 'auto'로 설정하면 세트의 최대 데이터 포인트 값으로 기본 설정됩니다. 기본값: ['auto' | 'auto']

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'sparkline',
    y_axis: [
      { range: [50, 'auto'] },
    ],
  }}
>
  <Visualization />
</Query>

표 차트 속성

다음은 표 차트의 config 속성입니다.

속성	값	참고
type	'table'
series	view_name.field_name 형식의 계열	구성 옵션 및 사용 예시는 계열 섹션을 참조하세요.
column_order	string[]	테이블 열을 왼쪽에서 오른쪽으로 정렬할 방법을 나타내는 계열의 이름의 배열(예: 'orders.count')입니다.
show_row_numbers	boolean	표 하단에서 합계 행 표시를 전환합니다. 기본값: true
show_totals	boolean	표 하단에서 합계 행 표시를 전환합니다. 기본값: true
show_row_totals	boolean	표 오른쪽에 있는 행 합계 표시를 전환합니다. 기본값: true
truncate_text	boolean	true인 경우 테이블 셀 텍스트가 한 줄로 제한되고 콘텐츠 오버플로는 줄임표로 잘립니다. false인 경우 콘텐츠는 여러 줄로 래핑할 수 있습니다. 기본값: true
truncate_header	boolean	true인 경우 테이블 헤더 라벨이 한 줄로 제한되고 콘텐츠 오버플로는 줄임표로 잘립니다. false인 경우 헤더를 여러 줄로 래핑할 수 있습니다. 기본값: true

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'table',
    column_order: ['orders.count', 'users.city'],
    show_row_numbers: true,
    show_totals: true,
    show_row_totals: true,
    truncate_text: true,
    truncate_header: true
  }}
>
  <Visualization />
</Query>

series

계열 속성은 응답의 특정 계열을 재정의하는 계열 구성 배열 또는 이름이 지정된 객체를 허용할 수 있습니다.

속성	값	참고
cell_visualization	boolean	인라인 셀 시각화를 사용 또는 사용 중지합니다. 첫 번째 측정의 기본값은 true이고 다른 측정의 기본값은 false입니다.
color	string	테이블 셀 시각화를 렌더링하는 데 사용되는 색상을 지정합니다.
value_format	string	숫자 형식 문자열은 값을 통화로 렌더링할지 여부, 부동 소수점 정밀도, 쉼표 또는 마침표로 천 단위를 구분할지 여부 등을 나타냅니다.

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'table',
    series: {
      'orders.count': {
        color: '#4285F4',
        cell_visualization: true,
        value_format: '$#,##0.00',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'table',
    series: [{
      color: '#4285F4',
      cell_visualization: true,
      value_format: '$#,##0.00',
    }]
  }}
>
 <Visualization />
</Query>

원형 차트 속성

다음은 원형 차트의 config 속성입니다.

속성	값	참고
type	'pie'
legend	false(사용 중지) | 범례 구성	false로 설정하면 범례가 사용 중지됩니다. 기본값: 사용 설정 사용 설정된 경우 구성 옵션과 사용 예시는 범례 섹션을 참조하세요.
tooltips	불리언	데이터 포인트 위로 마우스를 가져가면 표시되는 도움말을 사용 또는 사용 중지합니다. 기본값: true
series	view_name.field_name 형식의 계열	구성 옵션 및 사용 예시는 계열 섹션을 참조하세요.

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: false,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

legend

legend 속성은 다음 범례 구성을 허용할 수 있습니다.

속성	값	참고
type	'labels' | 'legend'	labels는 각 슬라이스를 직접 가리키는 라벨을 배치합니다. legend는 별도의 범례를 배치합니다. 기본값: 'legend'
position	'top' | 'bottom' | 'left' | 'right'	type: 'legend'일 때 범례를 배치합니다. 기본값: 'right'
width	숫자	type: 'legend'인 경우 범례의 최대 너비(픽셀)입니다. 기본값: 300
value	'label' | 'label_value' | 'value' | 'percent' | 'label_percent'	범례 콘텐츠인 라벨, 라벨 및 값, 값, 백분율, 라벨 및 백분율을 설정합니다. 기본값: 'label_percent'

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: {
      type: 'legend'
      position: 'right'
      width: 200,
      value: 'label_value',
    },
  }}
>
  <Visualization />
</Query>

series

카티전 차트와 달리 원형 차트의 각 데이터 포인트는 새 계열로 처리됩니다.

속성	값	참고
color	문자열	16진수 코드

사용 예시:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    series: {
      'New York': {
        color: '#4285F4',
      },
      'Los Angeles': {
        color: '#b73ec3',
      },
      'Chicago': {
        color: '#db4da8',
      },
    },
  }}
>
  <Visualization />
</Query>