Ant Design Charts

FAQ

Loading...

FAQ

以下整理了一些 Ant Design Charts 社区常见的问题和官方答复。

1、Object(...) is not a function

可能原因：

React 版本过低，不支持 hooks 引起的，升级到 16.8.4 版本或最新版本即可。
使用了 2.x 版本的 ant-design-pro ，导致底层依赖冲突，建议升级 pro 到最新版本。
使用了 BizCharts 依赖冲突。

2、打包文件过大，如何按需加载

方案 1：从 es 引入

从对应子包里面引入

// 统计图表
import Line from '@ant-design/plots/es/components/line';

方案 2：开启 sideEffects

开启 webpack sideEffcets 配置，webpack 4+ 默认应该是开启的。

{
  optimization: {
     sideEffects: true,
  }
}

方案 3：使用 babel-plugin-import

// 安装依赖
  npm install babel-plugin-import -D

  // 配置 .babelrc 文件
  {
    "plugins": [
      ["import", {
        "libraryName": "@ant-design/plots",
        "libraryDirectory": "es"
      }],
      ["import", {
        "libraryName": "@ant-design/graphs",
        "libraryDirectory": "es"
      }],
      ["import", {
        "libraryName": "@ant-design/maps",
        "libraryDirectory": "es"
      }]
    ]
  }

3、为什么图表一直重绘

由于 react 机制，默认情况下只要父组件有状态更新，子组件都会重新渲染，导致图表再次重绘。可参考示例

4、IE 兼容

参考 ChartsIE

FAQ

FAQ

1、Object(...) is not a function

2、打包文件过大，如何按需加载

3、为什么图表一直重绘

4、IE 兼容

更多问题