MongoDB（112）如何使用MongoDB Charts进行数据可视化？

使用MongoDB Charts进行数据可视化需要以下步骤：

登录MongoDB Atlas控制台。
在控制台页面，找到你的集群，并点击 "MongoDB Charts" 图标进入MongoDB Charts。

创建数据源：

javascript 复制代码

const data = {
  name: "My Data Source",
  type: "mongodb",
  connection: {
    connectionString: "<your_connection_string>",
  },
};

const response = await fetch("https://charts.mongodb.com/api/datasources", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <your_charts_api_key>",
  },
  body: JSON.stringify(data),
});

const dataSource = await response.json();

创建仪表板：

javascript 复制代码

const dashboard = {
  name: "My Dashboard",
  dataSources: [dataSource._id],
};

const response = await fetch("https://charts.mongodb.com/api/dashboards", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <your_charts_api_key>",
  },
  body: JSON.stringify(dashboard),
});

const createdDashboard = await response.json();

添加图表和可视化组件：

javascript 复制代码

const chart = {
  name: "My Chart",
  type: "bar",
  dataSource: dataSource._id,
  query: {
    aggregation: [
      { $group: { _id: "$category", count: { $sum: 1 } } },
    ],
  },
};

const response = await fetch(
  `https://charts.mongodb.com/api/dashboards/${createdDashboard._id}/charts`,
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer <your_charts_api_key>",
    },
    body: JSON.stringify(chart),
  }
);

const createdChart = await response.json();

自定义图表样式和布局：

javascript 复制代码

const style = {
  backgroundColor: "#ffffff",
  color: "#333333",
};

const response = await fetch(
  `https://charts.mongodb.com/api/charts/${createdChart._id}/style`,
  {
    method: "PATCH",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer <your_charts_api_key>",
    },
    body: JSON.stringify(style),
  }
);

const updatedStyle = await response.json();

设置过滤器和交互操作：

javascript 复制代码

const filter = {
  field: "date",
  operator: "$gte",
  value: "2022-01-01",
};

const response = await fetch(
  `https://charts.mongodb.com/api/charts/${createdChart._id}/filters`,
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer <your_charts_api_key>",
    },
    body: JSON.stringify(filter),
  }
);

const addedFilter = await response.json();

这些代码片段展示了如何使用MongoDB Charts进行数据可视化。你需要替换 <your_connection_string>、<your_charts_api_key> 和其他相关参数为你自己的值。通过这些步骤，你可以创建数据源、仪表板，添加图表和可视化组件，自定义样式和布局，设置过滤器和交互操作。你可以根据需要添加更多的图表和组件，并使用MongoDB Charts提供的API来进一步控制和定制你的数据可视化。