인증되지 않은 차트 임베드

대시보드를 선택합니다.

대시보드 페이지에서 임베드 가능하게 만들 차트가 포함된 대시보드를 선택합니다.

차트를 선택합니다.

대시보드에서 다음을 클릭합니다. 을(를) 클릭하여 임베딩 정보에 액세스합니다. 드롭다운 메뉴에서 Embed chart 를 선택합니다.

데이터 소스에서 외부 공유를 활성화합니다.

If you have already enabled external sharing on the data source this chart uses, skip this step. 아직 데이터 소스에서 임베딩을 활성화하지 않은 경우 지금 활성화할 수 있습니다. Configure external sharing 링크를 클릭합니다.

대화 상자 창에서 Unauthenticated 탭을 선택합니다.

Enable unauthenticated access을(를) On(으)로 전환합니다.

(선택 사항) 차트에서 필터링 가능한 필드를 지정합니다.

차트 뷰어에서 데이터를 필터링할 수 있는 필드를 지정합니다. 기본적으로 필드는 지정되지 않으므로, 하나 이상의 필드를 명시적으로 허용할 때까지 차트를 필터링할 수 없습니다.

또는 Allow all fields in the data source used in this chart 을 선택하여 차트의 모든 필드를 지정할 수 있습니다.

필터링 가능한 필드에 대해 자세히 알아보려면 필터링 가능한 필드 지정을 참조하세요.

Javascript SDK 패널을 선택합니다.

Charts Base URL 및 Chart ID 을(를) 복사합니다.

웹 애플리케이션 코드에는 Atlas Charts 기본 URL 및 ID 값이 필요합니다.

텍스트 편집기에서 index.js 파일을 엽니다.

index.js 파일은 src 디렉토리에 있습니다.

Charts 기본 URL 입력

기존 Charts 기본 URL을 표시하려는 Charts의 기본 URL로 바꿉니다. Your Charts 기본 URL은 임베딩 옵션 모달 창에서 볼 수 있습니다. 차트 임베딩을 활성화하는 방법에 대한 자세한 지침은 임베딩 SDK 를 참조하세요.

const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp" // Optional: ~REPLACE~ with the Base URL from your Embed Chart dialog
});

다음 코드 스니펫과 같이 HTML 페이지에 인라인 Javascript와 함께 Embedding SDK를 포함할 수도 있습니다.

<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.6.0/stitch.js"></script>
<script src="https://unpkg.com/@mongodb-js/charts-embed-dom"></script>

차트 ID 입력

기존 차트 ID를 표시하려는 차트의 ID로 바꿉니다. 차트 ID는 임베딩 옵션 모달 창에서 볼 수 있습니다. 차트 임베딩을 활성화하는 방법에 대한 자세한 지침은 임베딩 SDK 를 참조하세요.

const chart = sdk.createChart({
  chartId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog
  height: "700px"
  // Additional options go here
});