/ /

/ /

iframe으로 차트 임베딩

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

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

인증되지 않은 경우, 누구나 볼 수 있습니다.
확인된 서명으로 인증됩니다.

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

전제 조건

차트 임베딩을 활성화하려면 대시보드 작성자 여야 합니다.
새 대시보드 생성하기
차트 만들기

절차

대시보드를 선택합니다.

Dashboards 페이지에서 임베드 가능하게 만들 차트 포함된 대시보드 를 선택합니다. 대시보드로 이동하는 방법에 대한 지침은 대시보드를 참조하세요.

차트를 선택합니다.

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

참고

임베딩이 활성화된 대시보드에 차트가 있는 경우 Embed Chart 옵션이 자동으로 활성화됩니다. 따라서 임베딩이 활성화된 대시보드 내의 차트에 대해서는 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 을 선택하여 차트의 모든 필드를 지정할 수 있습니다.

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

레이블이 지정된 패널을 Iframe 선택합니다.

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

옵션을 설정합니다.

새로 고침 간격은 데이터 소스의 새 데이터(있는 경우)로 차트를 새로 고치는 빈도를 결정합니다.
무료 계층 사용자인 경우 자동 새로 고침 간격으로 새로운 4시간 옵션이 기본값 으로 선택됩니다.
차트의 Light 또는 Dark 표시 테마를 선택할 수 있습니다.

iframe 임베딩 코드를 복사합니다.

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

(선택 사항) 추가 옵션을 설정합니다.

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

중요

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

Charts(으)로 고 (Go) .

Atlas Charts 아직 표시되지 않은 경우, Atlas UI 의 사이드바에 있는 Services 제목 아래에 있는 Visualization 를 클릭합니다.

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

대시보드를 선택합니다.

Dashboards 페이지에서 임베딩을 활성화 하려는 차트 포함된 대시보드 를 선택합니다. 대시보드로 이동하는 방법에 대한 지침은 대시보드를 참조하세요.

차트를 선택합니다.

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

참고

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

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

서명 인증 을 활성화했습니다.

대화 상자에서 Verified Signature 탭 을 선택합니다.
Enable signed authentication access 를 On로 전환합니다.

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

Embedded Visualizations 페이지로 고 (Go) .

Visualization 사이드바의 Services 제목 아래에 있는 Embedded Visualizations 을 클릭합니다.

내장된 시각화 페이지가 표시됩니다.

보기로 Authentication Settings 고 (Go) 합니다.

참고

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

Authentication Settings 탭을 클릭합니다.

인증 설정 탭 이 표시됩니다.

임베딩 키를 생성합니다.

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

경고

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

확인된 서명에 필요한 서버 측 코드를 생성합니다.

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

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

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

돌아가기

차트 임베드

임베딩 SDK 사용