시각화 및 쿼리 속성 테이블

Visualization

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

속성	값	참고
width	숫자 (픽셀)	prop이 정의되지 않은 경우 기본값은 100% 입니다.
height	숫자 (픽셀)	prop이 정의되지 않은 경우 기본값은 500px입니다.
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 값으로 쿼리 응답을 가져옵니다. vis 구성 재정의를 전달하여 API 응답과 병합하고 모든 데이터를 React 컨텍스트에 로드할 수 있습니다.

속성	값	참고
query	숫자 | 문자열	탐색 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축의 최솟값과 최댓값을 설정합니다. 최솟값을 '자동'으로 설정하면 기본값이 0으로 설정되고, 최댓값이 '자동'으로 설정되면 집합의 최대 데이터 포인트 값이 기본값으로 설정됩니다. 기본값: ['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축의 최솟값과 최댓값을 설정합니다. 최솟값을 '자동'으로 설정하면 기본값이 0으로 설정되고, 최댓값이 '자동'으로 설정되면 집합의 최대 데이터 포인트 값이 기본값으로 설정됩니다. 기본값: ['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축의 최솟값과 최댓값을 설정합니다. 최솟값을 '자동'으로 설정하면 기본값이 0으로 설정되고, 최댓값이 '자동'으로 설정되면 집합의 최대 데이터 포인트 값이 기본값으로 설정됩니다. 기본값: ['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

Sparkline은 기본적으로 단일 시리즈만 지원하지만 라이브러리의 다른 차트 유형과 일관성을 유지하기 위해 명명된 또는 계열 시리즈 재정의를 포함하는 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축의 최솟값과 최댓값을 설정합니다. 최솟값을 '자동'으로 설정하면 기본값이 0으로 설정되고, 최댓값이 '자동'으로 설정되면 집합의 최대 데이터 포인트 값이 기본값으로 설정됩니다. 기본값: ['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>