공지 사항역대 가장 빠른 MongoDB, MongoDB 8.0을 소개합니다! 더 보기 >

공지 사항Voyage AI가 MongoDB와 협력하여 Atlas에서 더욱 정확하고 신뢰할 수 있는 AI 애플리케이션을 지원합니다. 자세히 알아보기 >

Atlas Charts

ATLAS

Atlas Charts

MongoDB Atlas에서 실시간 애플리케이션 데이터의 시각화를 쉽게 생성, 공유, 포함할 수 있습니다.

무료 체험판 다운로드데모 보기

빠르고 간단한 실시간 데이터 인사이트

몇 번의 클릭만으로 동적 대시보드를 만들고 AI로 차트를 생성해 보세요. 모든 Atlas 프로젝트는 기본적으로 사용 가능합니다. 대시보드는 자동으로 새로 고침되며 팀과 손쉽게 공유할 수 있습니다.

자세히 알아보기

데이터 기반 의사결정 지원

JSON 데이터를 직접 활용해 분석 워크플로를 간소화하세요. 네이티브 문서 모델 지원을 통해 인사이트를 찾는 데 소요되는 시간을 줄이고, 의사 결정에 더 많은 시간을 할애할 수 있습니다. 기존 business intelligence 도구처럼 데이터를 평면화할 필요가 없습니다.

자세히 알아보기

임베디드 분석을 통한 최신 환경 구축

iFrame을 사용하여 빠르게 설정하거나, 더 많은 제어와 맞춤화를 위해 SDK를 활용하여, 모든 애플리케이션에 차트와 대시보드를 삽입할 수 있습니다. 사용자가 필요로 하는 곳에 강력한 인사이트를 정확히 전달하세요.

자세히 알아보기

조직 전반의 인사이트 확보

Charts에서 세부적인 팀 공유, 조직 전체 액세스, 예약된 보고를 통해 인사이트를 손쉽게 공유하세요.

자세히 알아보기

임베디드 분석을 통해 Charts를 더 알차게 활용하세요

문서 보기

Atlas Charts는 시각화를 삽입할 수 있는 다양한 방법을 제공하여, 애플리케이션에서 실시간 인사이트를 손쉽게 확인할 수 있습니다.

문서 보기

iframe으로 차트와 대시보드 손쉽게 삽입하기

iframe은 크기 조정, 새로고침 간격, 표시 테마에 대한 사용자 지정 옵션을 통해 빠르고 쉽게 사용할 수 있습니다.

문서 읽기

임베딩 SDK로 다양한 커스터마이징 지원

SDK를 통해 차트 제목, 설명, 축, 채널, 색상, 조건부 서식을 사용자 지정할 수 있습니다.

문서 읽기

차트 상호 작용 추가 또는 생성

이벤트 핸들러를 사용해 임베디드 차트에 대화형 기능을 추가하세요. 요소를 클릭하여 세부 정보를 확인하고, 데이터를 강조 표시하거나 다른 차트를 필터링할 수 있습니다.

문서 읽기

iframe으로 차트와 대시보드 손쉽게 삽입하기

iframe은 크기 조정, 새로고침 간격, 표시 테마에 대한 사용자 지정 옵션을 통해 빠르고 쉽게 사용할 수 있습니다.

문서 읽기

차트

대시보드

Code Snippet

임베딩 SDK로 다양한 커스터마이징 지원

SDK를 통해 차트 제목, 설명, 축, 채널, 색상, 조건부 서식을 사용자 지정할 수 있습니다.

문서 읽기

JavaScript

Code Snippet

차트 상호 작용 추가 또는 생성

문서 읽기

JavaScript

Code Snippet

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
 
const sdk = new ChartsEmbedSDK({
 baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: ~REPLACE~ with the Base URL from your Embed Chart dialog
});
 
const chart1 = sdk.createChart({
 chartId: "CHARTID#", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog
 높이: "700px",
});
 
const chart2 = sdk.createChart({
 chartId: "CHARTID#", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog
 높이: "700px",
});
 
const clickHandler = (payload) => {
 chart1.setHighlight(payload.selectionFilter);
 chart2.setFilter(payload.selectionFilter);
 document.getElementById(
   "filterMessage"
 ).innerText = `${payload.data.y.value} movies from the ${payload.data.color.lowerBound}s`;
};
 
비동기 함수 renderCharts() {
 await chart1.render(document.getElementById("chart1"));
 await chart2.render(document.getElementById("chart2"));
 
 const options = { includes: [{ roles: ["mark"] }] };
 await chart1.addEventListener("click", clickHandler, options);
}
 
renderCharts().catch((e) => window.alert(e.message));

차트

대시보드

Code Snippet