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>