Docs Menu
Docs Home
/
Atlas Charts
/
임베딩
/
차트 임베드
/
옵션

Iframe 옵션

이 페이지의 내용

  • 새로 고침 및 데이터 캐싱 동작 구성
  • 예시
  • 고려 사항
  • 표시 테마 지정
  • 표시 옵션 사용자 지정
  • 배경 색상
  • 차트 테두리
  • 디스플레이 테마
  • Iframe 예제
  • MongoDB 로고 제거

차트 URL에 인라인 스타일 태그와 쿼리 매개변수를 추가하여 iframe 내에서 차트 옵션을 설정할 수 있습니다. 인라인 스타일 태그를 사용하면 높이, 너비, 배경색, 테두리 너비 등의 표시 옵션을 지정할 수 있습니다. 쿼리 매개변수를 사용하면 차트의 새로 고침 간격은 물론 밝거나 어두운 표시 테마를 지정할 수 있습니다.

새로 고침 및 데이터 캐싱 동작 구성

autoRefresh 쿼리 매개변수는 차트가 자동으로 새로 고침되도록 구성할 수 있는 부울입니다.

maxDataAge 쿼리 매개변수는 다음을 수행할 수 있는 정수입니다.

  • autoRefresh 이 true 인 경우 차트가 새로 고쳐지는 간격을 결정합니다.

  • autoRefresh 이(가) false 이거나 생략된 경우 차트를 로드하거나 수동으로 새로 고침할 때 캐시에서 로드할 데이터의 최대 보관 기간을 구성합니다.

    autoRefresh 및 maxDataAge 값을 기준으로 차트 를 로드하거나 새로 고칠 때 Atlas Charts 가 캐시 에서 데이터를 로드하는 방법을 학습 보려면 새로 고침 및 데이터 캐싱 동작을 참조하세요.

Embed Chart 대화 상자의 Unauthenticated 탭에 있는 옵션을 사용하여 iframe 스니펫의 autoRefresh 값을 사용자 지정합니다.

예시

다음 iframe에는 autoRefresh=true 및 maxDataAge=60 쿼리 매개변수에 의해 정의된 대로 60초마다 자동으로 새로 고쳐지는 차트가 포함되어 있습니다.

<iframe style="border: none;border-radius: 2px;box-shadow: 0 2px
10px 0 rgba(70, 76, 79, .2);" width="640" height="480" src="
{charts-host}/embed/charts?id=b3ca720f-4b4a-40b4-a726-e7dc0c49aa1c&
autoRefresh=true&maxDataAge=60"></iframe>

고려 사항

  • 최소 캐시 지속 시간은 60초입니다. autoRefresh 가 true 이고 maxDataAge 값을 60보다 작게 지정하면 차트가 60초마다 새로 고쳐집니다.

  • 정수가 아니거나 -1 보다 작은 maxDataAge 값을 지정하면 오류 가 반환됩니다.

  • 데이터 소스 에 확인된 서명 이 필요한 경우 새로 고침할 때마다 서명 유효성(만료일 포함)을 확인합니다. 서명의 만료 날짜가 지난 경우 차트 렌더링을 계속하려면 호스팅하다 웹 페이지에서 새 서명을 다시 생성해야 합니다. 확인된 서명을 사용하는 코드 예제는Atlas Charts 임베딩 예제 를 Github 참조하세요. 에서 .

    예시

    autoRefresh 이(가) true 이고, 캐시 기간이 1분(maxDataAge=60)이고, 서명의 만료 날짜가 1시간 이내인 경우, 차트는 1시간 동안 1분마다 새로 고쳐집니다. 1시간이 지나면 차트가 표시되지 않으며 서명이 더 이상 유효하지 않으므로 오류가 표시됩니다. 차트 렌더링을 다시 시작하려면 호스트 웹 페이지에서 새 서명을 다시 생성해야 합니다.

표시 테마 지정

theme 쿼리 매개변수를 사용하여 표시 테마를 선택합니다.

  • light: 차트 축과 텍스트가 밝거나 흰색 배경에서 표시되도록 최적화되어 있습니다.

  • dark: 차트 축과 텍스트가 어두운 배경 또는 검은색 배경에서 표시되도록 최적화되어 있습니다.

theme 값을 선택하면 애플리케이션에 차트를 포함하는 데 사용하는 iframe 스니펫만 업데이트됩니다. 차트가 theme 값으로 저장되지 않습니다. 차트는 기본적으로 밝은 테마로 렌더링됩니다. 테마 매개변수를 포함하지 않는 포함된 Atlas Charts도 밝은 테마로 렌더링됩니다.

참고

light 또는 dark 테마를 선택해도 차트 데이터 요소가 사용하는 색상표는 변경되지 않습니다. 모든 막대와 마크는 기본 팔레트 또는 차트 작성자가 선택한 사용자 정의 팔레트를 사용하여 표시됩니다.

예를 들어 검은색으로 렌더링할 차트 표시줄을 선택한 경우 dark 테마를 선택해도 어두운 배경에서 더 잘 보이도록 이 표시줄의 색상이 변경되지는 않습니다.

표시 옵션 사용자 지정

Atlas Charts는 선택한 테마에 따라 포함된 차트에 배경색과 상자 그림자가 있는 테두리를 추가하는 UI에서 복사한 iframe 스니펫에 인라인 스타일 속성을 추가합니다.

  • light 테마 background: #FFFFFF

  • dark 테마 background: #21313C

  • border: none

  • border-radius: 2px

  • box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2)

  • width: 640

  • height: 480

인라인 스타일 속성의 값을 변경하여 애플리케이션에 포함된 차트가 표시되는 방식을 변경합니다.

배경 색상

  • background 속성 값을 background CSS 속성 에서 지원하는 값으로 변경하여 이에 대한 차트 를 표시합니다. 배경 보기 자세한 내용은 MDN 웹 Docs 를 참조하세요.

  • background 속성을 transparent 로 변경하여 차트를 투명한 배경으로 표시하여 애플리케이션의 배경이 차트를 통해 표시되도록 합니다.

  • 선택한 테마의 기본 배경색을 사용하려면 background 속성을 제거합니다.

    • #FFFFFF light 테마의 경우(기본값) 또는

    • #21313C dark 테마의 경우.

차트 테두리

  • 차트 테두리를 사용자 지정하거나 제거하려면 다음 속성을 수정하거나 제거합니다.

    • border

    • border-radius

    • box-shadow

디스플레이 테마

  • iframe 스니펫을 애플리케이션에 붙여넣은 후 해당 스니펫에서 theme 쿼리 매개변수의 값을 변경할 수 있습니다. 이 경우 선택한 테마와 일치하도록 iframe의 인라인 스타일 속성을 조정해야 합니다.

예시

theme 을(를) light 에서 dark(으)로 변경하는 경우, iframe 스니펫의 background 속성 값을 조정하여 차트를 어두운 배경에 표시하세요.

#FFFFFF 의 기본 light 테마 background 와 함께 light 테마를 사용하는 차트입니다.

밝은 테마 스타일과 함께 밝은 테마를 사용하여 표시되는 차트입니다.
클릭하여 확대

#FFFFFF 의 기본 light 테마 background 와 함께 dark 테마를 사용하는 차트입니다.

밝은 테마 스타일에 어두운 테마를 사용하여 표시되는 차트입니다.
클릭하여 확대

#21313C 의 기본 dark 테마 background 와 함께 dark 테마를 사용하는 차트입니다.

다크 테마 스타일과 함께 다크 테마를 사용하여 표시되는 차트입니다.
클릭하여 확대

Iframe 예제

다음 iframe은 기본 dark 테마 인라인 스타일 속성을 가진 dark 테마의 차트를 포함합니다. 이 코드는 가독성을 높일 수 있도록 서식이 지정되어 있습니다.

<iframe style="
background: #21313C;border: none;border-radius: 2px;
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);"
width="640" height="480" src="
https://charts.mongodb.com/charts-crllr/embed/charts?id=a1b2c3d4-a1b2-c3d4-9766-47b0b2daaff3&
theme=dark
"></iframe>

MongoDB 로고 제거

MongoDB 로고 없이 포함된 차트를 표시하려면 false 값과 함께 attribution 쿼리 매개변수를 사용합니다.

다음 iframe 스니펫은 MongoDB 로고가 표시되지 않는 차트를 렌더링합니다.

<iframe
style="background: #FFFFFF;border: none;border-radius: 2px;
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);"
width="640" height="480" src="
https://charts.mongodb.com/mongodb-charts-twsqq/embed/charts
?id=a1b2c3d4-a1b2-c3d4-9766-47b0b2daaff3&
theme=light&
attribution=false
"></iframe>

돌아가기

SDK

다음

필터