임베디드 Atlas Charts SDK 옵션
이 페이지의 내용
임베딩 SDK는 JavaScript createChart() 웹 페이지 내에서 차트 를 렌더링하는 메서드입니다. 옵션을 사용하여 차트 의 높이와 너비, 새로 고침 간격 및 기타 측면을 제어할 수 있습니다.
예시
다음 예제에서는 옵션과 함께 createChart() 메서드를 사용합니다.
const chart = new ChartsEmbedSDK({}).createChart({ baseUrl: 'https://charts.mongodb.com/charts-rendering-spec-project-aygif', chartId: '38de4b38-42ea-422a-b702-a0220c8885e8', height: 300, width: 400, renderingSpec: { version: 1, title: 'Customized chart title', description: 'Customized chart description', axes: { y: { logScale: true }, }, channels: { x: { labelOverride: "New field label" }, y: { numberSuffix: "%" } }, options: { labelSize: 150, lineSmoothing: 'monotone' } } }); await chart.render(embedContainer);
임베딩된 차트 옵션
createChart() 메서드는 다음 옵션을 사용합니다.
옵션 | 유형 | 설명 | 필수 사항입니다. |
|---|---|---|---|
| 부울 | 차트를 자동으로 새로 고침할지 여부를 나타내는 플래그입니다. 생략하면 Atlas Charts 자동으로 새로 고침되지 않습니다. 자동 대시보드 새로 고침 빈도를 구성하려면 이 옵션을 | no |
| 문자열 |
생략하면 배경색은 기본적으로 현재
| no |
| 문자열 | 차트의 기본 URL입니다. | 네 |
| 문자열 | 차트의 고유 식별자입니다. | 네 |
| 객체 | 사전 필터 를 사용하여 차트 에 적용 합니다. 사전 필터는 차트의 쿼리 실행 이 시작되기 전에 실행됩니다. | no |
| 객체 | 필터 를 적용하여 차트에 적용합니다. | no |
| 객체 |
인증된 액세스가 활성화된 경우 Atlas Charts는 구성된 인증 제공자를 사용하여 토큰의 유효성을 검사할 수 있는 경우에만 인증된 Atlas Charts 뷰를 렌더링합니다. 토큰이 유효하지 않은 경우 인증되지 않은 액세스 를 허용했다면 Atlas Charts 는 인증되지 않은 차트 를 렌더링합니다. 그렇지 않으면 Charts 는 차트 를 렌더링하지 않습니다. 학습 내용 은 사용자 지정 JSON web token 제공자를 사용하여 인증된 차트 임베드하기를 참조하세요. | no |
| 숫자 | 차트의 높이입니다. 생략하면 차트는 기본적으로 해당 container 높이로 설정됩니다. 단위 없이 값을 제공하는 경우 단위는 기본적으로 픽셀(PX)이 사용됩니다. | no |
| 숫자 | 차트를 로드하거나 새로 고칠 때 캐시에서 로드할 데이터의 최대 보관 기간을 지정합니다. 생략할 경우 Atlas Charts는 데이터가 발생한 지 1시간 미만인 경우 캐시의 데이터로 차트를 렌더링합니다. 캐시의 데이터가 1시간 이상 지난 경우 Atlas Charts는 데이터 소스에서 최신 데이터를 쿼리하고 캐시를 새로 고치고 이 데이터를 사용하여 차트를 렌더링합니다.
| no |
| 객체 | 포함된 차트를 사용자 지정하는 방법을 지정하는 렌더링 사양입니다. 사용 가능한 사용자 지정 목록은 렌더링 사양 옵션을 참조하세요. | no |
| 부울 | 차트 아래에 MongoDB 로고를 표시할지 여부를 나타내는 플래그입니다. 기본값은 | no |
| 문자열 | 사용할 차트의 테마 입니다. 유효한 옵션은 다음과 같습니다.
기본값은 | no |
| 숫자 | 차트의 너비입니다. 생략하면 차트는 기본적으로 해당 container 너비로 설정됩니다. 단위 없이 값을 제공하면 기본값은 픽셀(PX)입니다. | no |
차트 구성
차트를 생성한 후에는 에서 반환된 인스턴스에서 메서드를 호출하여 차트 구성을 제어할 수 Chart ChartsEmbedSDK.createChart({ ... })있습니다.
getCustomizableAxes()
포함된 차트의 차트 축을 반환합니다.
setAutoRefresh(boolean)
차트를 자동으로 새로 고침할지 여부를 지정합니다. 생략하면 Atlas Charts가 자동으로 새로 고침되지 않습니다.
차트를 새로 고치는 빈도를 구성하려면 이 메서드를 setMaxDataAge 메서드와 함께 사용합니다.
setPreFilter(object)
내장된 차트 또는 내장된 대시보드 내의 차트 에 쿼리 사전 필터 를 적용합니다. 이 메서드는 유효한 쿼리 연산자가 있는 객체 를 사용합니다. 이 사전 필터에서 참조된 필드를 Embed Chart 모달 창 Allowed filter fields 목록에 추가합니다. 빈 문서 {} 는 사전 필터를 생략했음을 의미합니다.
차트 임베딩 활성화 및 사전 필터 적용에 학습 보려면 임베딩 튜토리얼을 참조하세요.
setFilter(object)
내장된 차트 또는 내장된 대시보드 내의 차트에 쿼리 필터 를 적용합니다. 이 메서드는 유효한 쿼리 연산자가 있는 객체를 사용합니다. 이 필터에서 참고된 모든 필드는 Embed Chart 모달 창의 Allowed filter fields 목록에 추가되어야 합니다. 빈 문서 {} 는 필터가 없는 것과 같습니다.
차트 임베딩 활성화 및 필터 적용에 학습 보려면 임베딩 튜토리얼을 참조하세요.
setMaxDataAge(number)
차트를 로드하거나 새로 고칠 때 캐시에서 로드할 데이터의 최대 보관 기간을 지정합니다. 생략할 경우 Atlas Charts는 데이터가 발생한 지 1시간 미만인 경우 캐시의 데이터로 차트를 렌더링합니다.
캐시의 데이터가 1시간 이상 지난 경우 Atlas Charts는 데이터 소스에서 최신 데이터를 쿼리하고 캐시를 새로 고치고 이 데이터를 사용하여 차트를 렌더링합니다.
setAutoRefresh 및 setMaxDataAge 값을 기준으로 차트를 로드하거나 새로 고칠 때 Atlas Charts가 캐시에서 데이터를 로드하는 방법을 알아보려면 새로 고침 및 데이터 캐싱 동작을 참조하세요.
setRenderingSpecOverride(object)
차트를 사용자 지정하는 방법을 지정합니다.
사용 가능한 사용자 지정 목록은 렌더링 사양 옵션을 참조하세요.
setTheme("dark" | "light")
포함된 차트의 현재 테마를 설정합니다. 테마를 dark 로 설정하는 경우 정보가 계속 표시되도록 차트의 배경색이 적절한 대비를 가지고 있는지 확인해야 합니다.
다음도 참조하세요.
예시
다음 예제에서는 dark 테마를 사용하고 60초마다 새로 고쳐지도록 chart 이라는 Chart 인스턴스를 구성합니다.
chart.setTheme("dark"); chart.setAutoRefresh(true); chart.setMaxDataAge(60);
렌더링 사양 옵션
renderingSpec 객체에 대해 다음 옵션을 지정할 수 있습니다.
참고
version 를 제외한 모든 옵션은 선택 사항입니다.
옵션 | 유형 | 설명 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
축 | 객체 | Atlas Charts 축을 사용자 지정하는 방법을 설명하는 객체입니다. | |||||||||
axes .labelOverride | 문자열 | 현재 좌표축 레이블을 바꿀 값입니다. 자세한 내용은 레이블 재정의를 참조하세요. | |||||||||
axes .labelAngle | 열거형 | 레이블을 표시할 각도입니다. 값은 이는 모든 열, 100% 스택 영역, 영역 불연속형, 선형 불연속형, 그룹화된 콤보, 스택 콤보 및 히트맵 Atlas Charts에 적용됩니다. 자세한 내용은 X축 레이블 각도 조정을 참조하세요. | |||||||||
axes .logScale | 부울 | 차트의 데이터 값에 로그 눈금을 사용할지 여부를 나타내는 플래그입니다. 이는 그룹화된 열, 색상형 열, 그룹화된 막대, 색상형 막대, 연속형 Atlas Charts, 불연속형 선형, 그룹화된 콤보 및 분산형 Atlas Charts에만 적용됩니다. 자세한 내용은 로그 스케일을 참조하세요. | |||||||||
axes .scaleMax | 번호 | false | 차트에 표시할 최대값입니다. 이는 그룹화된 열, 색상형 열, 스택형 열, 그룹화된 막대, 색상형 막대, 스택형 막대, 연속형 영역, 영역 불연속형, 연속형 선형, 불연속형, 분산형, 그룹화된 콤보, 스택 콤보 및 게이지 Atlas Charts에만 적용됩니다. 자세한 내용은 최대 및 최소 항목을 참조하세요. | |||||||||
axes .scaleMin | 번호 | false | 차트에 표시할 최소값입니다. 이는 그룹화된 열, 색상형 열, 스택형 열, 그룹화된 막대, 색상형 막대, 스택형 막대, 연속형 영역, 영역 불연속형, 연속형 선형, 불연속형, 분산형, 그룹화된 콤보, 스택 콤보 및 게이지 Atlas Charts에만 적용됩니다. 자세한 내용은 최대 및 최소 항목을 참조하세요. | |||||||||
채널 | 객체 | Atlas Charts 채널을 사용자 지정하는 방법을 설명하는 객체입니다. | |||||||||
channels .labelOverride | 문자열 | 현재 채널 레이블을 대체할 값입니다. 자세한 내용은 필드 레이블 재정의를 참조하세요. | |||||||||
channels .numberDecimals | 숫자 | 각 숫자 데이터 값 또는 레이블을 반올림할 소수점 이하 자릿수입니다. 자세한 내용은 숫자 포맷을 참조하세요. | |||||||||
channels .numberMultiplier | 숫자 | 각 숫자 데이터 값 또는 레이블에 곱할 숫자입니다. 자세한 내용은 숫자 포맷을 참조하세요. | |||||||||
channels .numberPrefix | 문자열 | 각 숫자 데이터 값 또는 레이블 앞에 추가할 문자열입니다. 자세한 내용은 숫자 포맷을 참조하세요. | |||||||||
channels .numberSuffix | 문자열 | 각 숫자 데이터 값 또는 레이블의 끝에 추가할 문자열입니다. 자세한 내용은 숫자 포맷을 참조하세요. | |||||||||
channels .numberThousandsSeparators | 부울 | 숫자 데이터 값의 쉼표를 천 단위 구분 기호로 표시할지 여부를 나타내는 플래그입니다. 자세한 내용은 숫자 포맷을 참조하세요. | |||||||||
channels .plotOnSecondaryAxis | 부울 | 세컨더리 Y축의 채널에 해당하는 필드 세트를 표시할지 여부를 나타내는 플래그입니다. 이는 영역 연속형, 그룹화된 열, 그룹화된 콤보, 스택 콤보, 연속 선형 및 불연속 선형 선형 Atlas Charts에만 적용됩니다. 자세한 내용은 세컨더리 Y축을 참조하세요. | |||||||||
channels .wrapText | 부울 | ||||||||||
조건부 서식 지정 | 객체 | 차트의 섹션 서식을 지정하는 방법을 설명하는 객체입니다. 자세한 내용은 조건부 서식 지정을 참조하세요. | |||||||||
conditionalFormatting .applyToEntireRow | 부울 | 지정된 형식을 전체 행에 적용할지 여부를 나타내는 플래그입니다. | |||||||||
conditionalFormatting .backgroundColor | 열거형 | 문자열 | 배경색을 사용자 지정하는 방법을 나타내는 객체입니다. 값은 다음 중 하나일 수 있습니다.
| |||||||||
conditionalFormatting .conditions | 배열 | 이는
| |||||||||
conditionalFormatting .conditions .operator | NumericOperator NumericBinnedOperator StringOperator StringRegexOperator DateOperator DateBinnedOperator |
이는 테이블 및 숫자 Atlas Charts에 적용됩니다. 유효한 연산자에 대해 자세히 학습 조건부 서식 지정 연산자를 참조하세요. | |||||||||
conditionalFormatting .conditions .targetChannel | 문자열 |
이는 | |||||||||
conditionalFormatting .conditions .targetType | 열거형 | 테이블 차트의 일부로 값은 | |||||||||
conditionalFormatting .conditions .value | number string array of strings object |
이는 테이블 및 숫자 Atlas Charts에 적용됩니다. | |||||||||
conditionalFormatting .fontStyle | 열거형 |
값은 다음 중 하나일 수 있습니다: 이는 테이블 및 숫자 Atlas Charts에 적용됩니다. | |||||||||
conditionalFormatting .fontWeight | 열거형 |
값은 다음 중 하나일 수 있습니다: 이는 테이블 및 숫자 Atlas Charts에 적용됩니다. | |||||||||
conditionalFormatting .reverseColor | 부울 |
이는 테이블 Atlas Charts에만 적용됩니다. | |||||||||
conditionalFormatting .textColor | 문자열 |
값은RGB 색상 모델, 16진수 색상 또는 색상 이름과 유사한 문자열이어야 합니다. | |||||||||
conditionalFormatting .textDecoration | 열거형 |
값은 이는 테이블 및 숫자 Atlas Charts에 적용됩니다. | |||||||||
conditionalFormatting .type | 열거형 | 차트에서 사용하는 조건부 규칙의 유형입니다. 값은 다음 중 하나일 수 있습니다:
| |||||||||
description | 문자열 | 차트에 대한 설명입니다. | |||||||||
옵션 | 객체 | 차트 옵션을 사용자 지정하는 방법을 설명하는 객체입니다. | |||||||||
options .categoryLabels | 부울 | 도넛형 차트에 카테고리 레이블을 표시할지 여부를 나타내는 플래그입니다. 자세한 내용은 카테고리 레이블 표시 또는 숨기기를 참조하세요. | |||||||||
options .colorPalette | 객체 | false | 색상표를 사용자 지정하는 방법을 설명하는 객체입니다. 자세한 내용은 색상 팔레트 사용자 지정을 참조하세요. | |||||||||
options .colorPalette .channels | 배열 | 사용자 지정 색상을 받을 채널의 이름입니다. | |||||||||
options .colorPalette .color | 객체 | 색상표를 사용자 지정하는 방법을 설명하는 객체입니다. 이는 시리즈 채널에 여러 필드를 가질 수 있는 모든 차트 유형(색상 막대형 차트를 제외한 모든 막대 차트, 색상형 열 및 캔들스틱을 제외한 모든 열 차트, 그룹화된 콤보, 스택 콤보, 모든 선형 차트, 모든 영역 차트 및 도넛형)에 적용됩니다. | |||||||||
options .colorPalette .marks | 배열 | 사용자 지정 색상을 수신하기 위한 시리즈 채널의 인코딩된 필드 값입니다. 이는 채널에 여러 시리즈가 있을 수 있는 모든 차트 유형에 적용됩니다.
| |||||||||
options .colorPalette .reverseColor | 부울 | 연속적인 색상을 반전할지 여부를 나타내는 플래그입니다. | |||||||||
options .colorPalette .type | 열거형 | 차트에서 사용하는 색상표의 유형입니다. 값은 다음 중 하나일 수 있습니다:
| |||||||||
options .colorPalette .values | 배열 | 단일 시리즈 차트의 경우 또는 다중 시리즈 차트의 경우 | |||||||||
options .labelSize | 번호 | false | 레이블을 변경할 크기입니다. 크기는 자세한 내용은 레이블 크기 조정을 참조하세요. | |||||||||
options .legendPosition | 열거형 | 차트와 관련하여 범례를 배치할 위치입니다. 이는 범례를 지원하는 Atlas Charts에만 적용됩니다. 값은 자세한 내용은 범례 사용자 지정을 참조하세요. | |||||||||
options .lineSmoothing | 열거형 | Atlas Charts가 차트에 선을 그리는 데 사용하는 메서드입니다. 값은 이는 연속형 영역, 영역 불연속형, 100% 스택 영역, 연속 선형, 불연속형, 그룹화된 콤보 및 스택 콤보 Atlas Charts에만 적용됩니다. 자세한 내용은 선 스무딩을 참조하세요. | |||||||||
options .markers | 부울 | 개별 데이터 점을 나타내는 표시 데이터 마커를 표시할지 여부를 나타내는 플래그입니다. 자세히 알아보려면 데이터 마커 표시 또는 숨기기를 참조하세요. | |||||||||
options .textSize | 번호 | false | 차트에 표시되는 텍스트의 크기입니다. 자세한 내용은 표 텍스트 크기 조정을 참조하세요. | |||||||||
options .totalsColumn | 부울 | 각 열의 총 합계를 표시할지 여부를 나타내는 플래그입니다. 자세한 내용은 테이블 행 및 열 합계 토글을 참조하세요. | |||||||||
options .totalsRow | 부울 | 각 행의 총 합계를 표시할지 여부를 나타내는 플래그입니다. 자세한 내용은 테이블 행 및 열 합계 토글을 참조하세요. | |||||||||
options .valueLabels | 열거형 | Atlas Charts에서 데이터 점의 정확한 값을 표시하는 데 사용하는 메서드입니다. 값은 다음 중 하나일 수 있습니다: 이는 100% 스택 막대형 차트를 제외한 모든 막대형 차트, 100% 스택 열 차트, 연속형 영역 차트, 영역 불연속형, 100% 스택 영역형, 선형 연속형, 선형 불연속형, 그룹화된 콤보 차트 및 스택 콤보 차트를 제외한 모든 막대 차트에 적용됩니다. 자세한 내용은 레이블 재정의를 참조하세요. | |||||||||
제목 | 문자열 | 차트의 제목입니다. | |||||||||
버전 | 숫자 | 렌더링 사양의 버전입니다. 첫 번째이자 현재 버전은 이는 필수 필드입니다. |
조건부 서식 지정 연산자
다음 표에는 조건부 서식에 사용할 수 있는 연산자, 해당 연산자가 적용되는 데이터 유형 및 가능한 값이 나와 있습니다.
연산자 | 유형 | Values | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
DateBinnedOperator | 객체 |
객체에는 다음 키가 있어야 합니다. | ||||||||||||
날짜 연산자 | 객체 |
객체에는 다음 키가 있어야 합니다. | ||||||||||||
NumericBinnedOperator | 숫자 |
| ||||||||||||
NumericOperator | 숫자 |
| ||||||||||||
StringOperator | 문자열 | 문자열 배열 |
| ||||||||||||
StringRegexOperator | 객체 |
객체에는 다음 키가 있어야 합니다.
|
채널 예시
다음 예시에서는 이러한 옵션을 사용하여 이름이 chart 인 Chart 인스턴스를 구성합니다.
렌더링 사양의
1버전을 사용하세요.x인코딩 채널을 다음으로 업데이트합니다.천 단위 구분 기호에는 쉼표를 사용하지 마세요.
모든 숫자 값을
$으로 시작합니다.
모든 숫자 값이
%으로 끝나도록y인코딩 채널을 업데이트합니다.color인코딩 채널을 다음으로 업데이트합니다.모든 소수점 값을 소수점 둘째 자리로 반올림합니다.
모든 숫자 값에 2를 곱합니다.
rainbow색상과 함께continuous색상표 유형을 사용하고 선택한 연속 색상을 반전시킵니다.
await chart.setRenderingSpecOverride({ version: 1, channels: { x: { numberThousandsSeparators: false, numberPrefix: '$', }, y: { numberSuffix: '%', }, color: { numberDecimals: 2, numberMultiplier: 2, }, }, options: { colorPalette: { type: 'continuous', color: 'rainbow', reverseColor: true, }, }, });
조건부 서식 지정 예시
다음 예시에서는 이러한 옵션을 사용하여 이름이 chart 인 Chart 인스턴스를 구성합니다.
렌더링 사양의
1버전을 사용하세요.값이
200보다 큰CHANNEL에 다음 조건부 서식을 지정합니다.'discrete'조건부 서식 규칙을 사용합니다.배경색을 빨간색이 240, 녹색이 209, 파란색이 117인RGB 색상 모델로 설정합니다.
텍스트 색상을
red으로 설정합니다.글꼴 스타일을
'italic'로 설정합니다.'underline'으로 텍스트를 꾸미세요.
value_series_0열의 경우:'continuous'색상표를 사용합니다.배경색을
redyellowgreen으로 설정합니다.선택한 연속 색상을 반전시킵니다.
await chart.setRenderingSpecOverride({ version: 1, conditionalFormatting: [{ type: 'discrete', backgroundColor: 'rgb(240, 209, 117)', textColor: 'red', fontStyle: 'italic', fontWeight: 'bold', textDecoration: 'underline', applyToEntireRow: false, conditions: [{ operator: 'NUMBER_GREATER_THAN', targetType: 'CHANNEL', targetChannel: 'value', value: 200, }], },{ type: 'continuous', backgroundColor: 'redyellowgreen', reverseColor: true, conditions: [{ targetChannel: 'value_series_0' }], }], });