Ant Design Charts CDN引入问题解析与解决方案

2025-07-09 06:59:35作者：邓越浪Henry

背景介绍

Ant Design Charts 是 AntV 可视化家族中的重要成员，提供了基于 React 的高质量统计图表组件。在实际开发中，很多开发者希望通过 CDN 方式快速引入并使用该库，但在 2.x 版本中遇到了引入后 window.Plots 未定义的问题。

问题现象

开发者尝试通过以下 CDN 链接引入 Ant Design Charts：

<script type="text/javascript" src="https://unpkg.com/@ant-design/plots@latest/dist/plots.min.js"></script>

但在控制台检查时发现 window.Plots 仍然是 undefined，导致无法正常使用图表功能。

根本原因

经过官方验证，这个问题通常是由于缺少必要的运行时依赖导致的。Ant Design Charts 2.x 版本作为 React 组件库，其运行需要以下前置条件：

React 运行时环境：必须预先加载 React 和 ReactDOM
Lodash 工具库：部分功能依赖 Lodash 的实用函数

完整解决方案

正确的 CDN 引入方式应该包含所有必要的依赖项：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ant Design Charts 示例</title>
  <!-- 必需的前置依赖 -->
  <script crossorigin src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/lodash@4.17.21/lodash.min.js"></script>
  
  <!-- Ant Design Charts 主库 -->
  <script type="text/javascript" src="https://unpkg.com/@ant-design/plots@latest/dist/plots.min.js"></script>
</head>
<body>
  <div id="container"></div>
  
  <script>
    // 确认库已正确加载
    console.log('Ant Design Charts 版本:', window.Plots.version);
    
    // 使用示例
    const { Line } = window.Plots;
    const data = [
      { year: '1991', value: 3 },
      { year: '1992', value: 4 },
      { year: '1993', value: 3.5 },
      { year: '1994', value: 5 },
    ];
    
    const line = new Line('container', {
      data,
      xField: 'year',
      yField: 'value',
    });
    
    line.render();
  </script>
</body>
</html>