Docs Menu
Docs Home
/
Atlas Charts
/ /

iframe으로 차트 임베딩

이 페이지의 내용

  • 전제 조건
  • 절차

iframe을 사용하여 웹 애플리케이션에 차트를 임베드하고 높이, 너비, 새로 고침 간격 및 표시 테마와 같은 설정을 지정할 수 있습니다.

iframe 내에 포함된 Atlas Charts는 다음 중 하나일 수 있습니다.

  • 인증되지 않은 경우, 누구나 볼 수 있습니다.

  • 확인된 서명으로 인증됩니다.

    참고

    확인된 서명을 사용한 인증은 더 이상 사용되지 않습니다. 임베딩 Charts SDK 는 여러 인증 인증 를 통한 인증을 제공합니다.

1

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

2

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

참고

임베딩이 활성화된 대시보드에 차트가 있는 경우 Embed Chart 옵션이 자동으로 활성화됩니다. 따라서 임베딩이 활성화된 대시보드 내의 차트에 대해서는 Embed chart 옵션을 선택할 수 없습니다.

3

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

4
인증되지 않은 차트 임베드
클릭하여 확대
5
6

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

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

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

7

Iframe 패널을 선택하면 iframe 임베딩 코드가 표시되며 새로 고침 및 표시 테마 옵션을 설정할 수 있습니다.

8
  1. 새로 고침 간격은 데이터 소스의 새 데이터(있는 경우)로 차트를 새로 고치는 빈도를 결정합니다.

  2. 차트의 Light 또는 Dark 표시 테마를 선택할 수 있습니다.

9

iframe 임베딩 코드에는 차트의 기본 URL과 차트 ID, 설정한 모든 옵션이 포함됩니다.

10

iframe 코드를 수동으로 편집하여 높이, 너비, 테두리 반지름 등 여러 다른 차트 옵션을 설정할 수 있습니다. 차트 옵션에 대한 자세한 내용은 포함된 차트 옵션 을 참조하세요.

중요

인증 에 확인된 서명을 사용하는 것은 더 이상 사용되지 않습니다. 대신 차트 보안에 대한 지침은 Authenticated Embedding 탭 을 참조하세요.

1

Atlas Charts가 아직 표시되지 않은 경우 Atlas UI에서 Charts 탭을 클릭합니다.

Atlas가 프로젝트에 연결된 Charts의 인스턴스를 시작합니다.

2

대시보드 페이지에서 임베딩을 활성화 하려는 차트 가 포함된 대시보드 를 선택합니다.

3

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

4

이 차트 에서 사용하는 데이터 소스 에서 외부 공유 를 이미 활성화한 경우 이 단계를 건너뛰세요. 아직 데이터 소스 에서 eexternal 공유 를 활성화하지 않은 경우 지금 활성화할 수 있습니다. Configure external sharing 링크를 클릭합니다.

5
  1. 대화 상자에서 Verified Signature 탭 을 선택합니다.

  2. Enable signed authentication accessOn로 전환합니다.

모달 창 에 표시되는 HTML 코드는 인증 이 활성화된 상태에서 차트 를 공유 하는 데 필요한 매개 변수를 보여줍니다. 이 코드를 사용하려면 후속 단계를 계속 진행하여 인증된 액세스 를 활성화 해야 합니다.

6

사이드바의 Development 제목 아래에 있는 Embedding 을 클릭합니다.

7

Authentication Settings 탭을 클릭합니다.

참고

Authentication Settings 페이지에 액세스 하려면 프로젝트 소유자 여야 합니다. 관리자가 아닌 사용자는 포함된 차트를 계속 사용할 수 있지만 프로젝트 소유자로부터 키를 받아야 합니다.

8

Generate New Key 버튼을 클릭하여 새 임베딩 키를 생성합니다. 키를 안전한 장소에 보관합니다.

경고

새 키를 생성하면 이전 키는 모두 유효하지 않게 됩니다. 이전 키를 사용하는 모든 기존 공유 차트가 새 키를 사용하도록 업데이트되었는지 확인합니다.

9

인증 이 활성화된 공유 차트의 데이터 요청을 수반하기 위해 확인된 서명을 생성하려면 서버 측 코드가 필요합니다. 확인된 서명은 HMAC 를 생성하여 페이로드를 생성합니다. 임베딩 키, 타임스탬프 및 차트 의 식별 데이터에서 확인된 서명은 서버 측 코드에 지정된 제한된 기간 동안 유효합니다.

확인된 서명을 생성하는 방법을 보여주는 코드 예제는 다음 언어 및 플랫폼에서 사용할 수 있습니다.

설정한 옵션과 함께 iframe 코드가 준비되면 웹 페이지에 배치하여 차트를 표시할 수 있습니다.

돌아가기

차트 임베드

이 페이지의 내용