如何在React应用中嵌入MongoDB Charts？求相关实现示例

我们可以直接基于官方的JS SDK封装React专用组件，以下是带JWT鉴权的完整实现，能力和官方原生方案完全对齐：

第一步：安装依赖 #

npm install @mongodb-js/charts-embed-dom
# 或使用yarn
yarn add @mongodb-js/charts-embed-dom

第二步：封装通用图表组件 #

import { useEffect, useRef } from 'react';
import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom';

const MongoDBChart = ({ chartId, baseUrl, jwtToken, width = '100%', height = '500px' }) => {
  const chartContainerRef = useRef(null);
  const chartInstanceRef = useRef(null);

  useEffect(() => {
    // 避免重复初始化
    if (chartInstanceRef.current || !chartId || !baseUrl) return;

    // 初始化SDK实例
    const sdk = new ChartsEmbedSDK({
      baseUrl: baseUrl
    });

    // 创建图表实例
    const chart = sdk.createChart({
      chartId: chartId,
      getUserToken: () => jwtToken // 不需要鉴权可删除该配置项
    });
    chartInstanceRef.current = chart;

    // 渲染图表到容器
    chart.render(chartContainerRef.current).catch(err => console.error('图表渲染失败：', err));

    // 组件卸载时销毁实例
    return () => {
      if (chartInstanceRef.current) {
        chartInstanceRef.current = null;
      }
    };
  }, [chartId, baseUrl, jwtToken]);

  return <div ref={chartContainerRef} style={{ width, height }} />;
};

export default MongoDBChart;

第三步：组件调用示例 #

import MongoDBChart from './components/MongoDBChart';

const App = () => {
  // 替换为你自己的图表参数和鉴权token
  const chartConfig = {
    baseUrl: '你的MongoDB Charts服务地址',
    chartId: '目标图表的ID',
    jwtToken: '后台生成的用户鉴权JWT令牌'
  };

  return (
    <div className="app-container">
      <h2>销售数据看板</h2>
      <MongoDBChart 
        {...chartConfig}
        width="100%"
        height="600px"
      />
    </div>
  );
};

export default App;

注意事项 #

• 你需要提前在MongoDB Charts控制台开启对应图表的嵌入功能，才能获取到baseUrl和chartId参数
• 如果你的图表设置为公开无需鉴权，删除组件中的getUserToken配置项即可正常渲染
• 图表会默认撑满父容器，你可以通过传入width和height参数自定义尺寸
• 如果你需要动态刷新图表数据，可以对外暴露chart.refresh()方法，在需要更新时主动调用

内容的提问来源于stack exchange，提问作者lihi