公告MongoDB 8.0 隆重推出，这是有史以来最快的MongoDB！了解详情 >

公告Voyage AI 与 MongoDB 携手合作，致力于在 Atlas 上提供更准确和更值得信赖的 AI 应用。了解更多 >

Atlas Charts

ATLAS

Atlas Charts

轻松创建、分享和嵌入来自 MongoDB Atlas 的实时应用程序数据的可视化。

免费试用观看演示

快速、简洁的实时见解

只需点击几下，即可创建动态仪表盘，并使用 AI 生成图表。默认情况下，所有 Atlas 项目均可用。仪表盘可自动刷新，并可轻松与团队共享。

了解详情

支持数据驱动的决策制定

通过直接处理 JSON 数据，简化您的分析工作流程。借助原生文档模型支持，您可以减少获取洞察的时间，把更多精力用于决策，无需像传统商业智能工具那样展平数据。

了解详情

利用嵌入式分析构建现代体验

使用 iframe 将图表和仪表盘嵌入到任何应用程序中以便快速设置，或使用我们的 SDK 以获得更大的控制和定制能力。在用户需要的地方精准提供有力的见解。

了解详情

为整个组织提供见解

通过 Charts 中的细粒度团队共享、全组织访问权限和计划报告，轻松分享见解。

了解详情

通过嵌入式分析功能更加充分地利用 Charts

查看文档

Atlas Charts 提供多种嵌入可视化的方式，使您可以轻松从应用程序中发现实时见解。

查看文档

轻松使用 iframe 嵌入图表和仪表盘

iframe 使用快速且简单，并提供大小、刷新间隔和显示主题的自定义选项。

阅读文档

通过嵌入 SDK 实现丰富的自定义

通过 SDK 自定义图表标题、描述、坐标轴、数据系列、颜色和条件格式。

阅读文档

添加或创建图表交互

使用事件处理程序为嵌入式图表添加交互性。单击元素以查看详细信息、突出显示数据或使用过滤器处理其他图表。

阅读文档

轻松使用 iframe 嵌入图表和仪表盘

iframe 使用快速且简单，并提供大小、刷新间隔和显示主题的自定义选项。

阅读文档

图表

仪表板

Code Snippet

通过嵌入 SDK 实现丰富的自定义

通过 SDK 自定义图表标题、描述、坐标轴、数据系列、颜色和条件格式。

阅读文档

JavaScript

Code Snippet

添加或创建图表交互

使用事件处理程序为嵌入式图表添加交互性。单击元素以查看详细信息、突出显示数据或使用过滤器处理其他图表。

阅读文档

JavaScript

Code Snippet

从 “@mongodb-js/charts-embed-dom” 导入 ChartsEmbedSDK;
 
const sdk = new ChartsEmbedSDK({
 baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // 可选：~REPLACE~ 替换为“嵌入图表”对话框中的基本 URL
});
 
const chart1 = sdk.createChart({
 chartId: "CHARTID#", // 可选：~使用嵌入图表对话框中的图表 ID 替换~
 height: "700px",
});
 
const chart2 = sdk.createChart({
 chartId: "CHARTID#", // 可选：~使用嵌入图表对话框中的图表 ID 替换~
 height: "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`;
};
 
async function 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