Ant Design Charts入门教程

以下教程将系统地介绍 Ant Design Charts 的用法,涵盖安装、引入、通用配置项、常用图表组件及它们的核心 API,每个 API 均附上详细示例代码,帮助您快速上手并深入掌握。


一、安装

bash 复制代码
# 使用 npm
npm install @ant-design/charts --save

# 或使用 pnpm(文档示例)
pnpm install @ant-design/charts  # 或者 @ant-design/plots 子包安装 :contentReference[oaicite:0]{index=0}
  • 安装完成后,所有图表组件均可从 @ant-design/charts 中按需导入。

二、引入与基础用法

tsx 复制代码
import React from 'react';
import { Line } from '@ant-design/charts';

const Demo: React.FC = () => {
  const data = [
    { time: '2020-01-01', value: 30 },
    { time: '2020-01-02', value: 50 },
    { time: '2020-01-03', value: 45 },
    // ...
  ];

  const config = {
    data,
    xField: 'time',
    yField: 'value',
    smooth: true,
  };

  return <Line {...config} />;
};
  • 上例中,data 为图表的数据源;xField/yField 指定横、纵坐标对应的数据字段。([umijs.org][1])

三、通用配置项(所有组件均支持) ([ant-design-charts-next.antgroup.com][2])

属性 类型 说明
data object[] 数据源
xField string X 轴字段
yField string Y 轴字段
seriesField string 分组字段,用于多系列图
colorField string 着色字段
height number 图表高度(px)
width number 图表宽度(px)
autoFit boolean 是否自适应容器宽度
padding `number[] string`
meta Record<string,object> 用于字段别名、格式化、刻度等设置
xAxis/yAxis object 轴配置,可详见下例
legend `object false`
tooltip `object false`
label `object boolean`
interactions Array<object> 交互行为列表
annotations Array<object> 注解列表
state object 状态样式,如 hover/selected
animation `object boolean`
theme `string object`

四、常用图表及核心 API

4.1 曲线图(Line)

tsx 复制代码
import { Line } from '@ant-design/charts';

const config = {
  data,
  xField: 'time',
  yField: 'value',
  seriesField: 'category',       // 多系列时使用
  smooth: true,                  // 平滑曲线
  point: {                       // 数据点
    size: 4,
    shape: 'circle',
  },
  xAxis: {
    tickCount: 5,
    title: { text: '日期' },
  },
  yAxis: {
    label: { formatter: v => `${v} 万` },
  },
  tooltip: {
    shared: true,
    showCrosshairs: true,
  },
};
return <Line {...config} />;

4.2 柱状图(Column / Bar)

tsx 复制代码
import { Column } from '@ant-design/charts';

const config = {
  data,
  xField: 'type',
  yField: 'value',
  seriesField: 'category',    // 分组柱状
  isStack: false,             // 关闭堆叠
  dodgePadding: 2,            // 分组间距
  color: ({ category }) => category === 'A' ? '#5B8FF9' : '#61DDAA',
  legend: false,              // 隐藏图例
  xAxis: { label: { autoRotate: false } },
};
return <Column {...config} />;

4.3 饼图(Pie)

tsx 复制代码
import { Pie } from '@ant-design/charts';

const config = {
  appendPadding: 10,
  data,
  angleField: 'value',
  colorField: 'type',
  radius: 0.8,
  label: {
    type: 'inner',
    offset: '-30%',
    content: '{percentage}',
    style: { fontSize: 14, textAlign: 'center' },
  },
  interactions: [{ type: 'element-active' }],
};
return <Pie {...config} />;

4.4 区域图(Area)

tsx 复制代码
import { Area } from '@ant-design/charts';

const config = {
  data,
  xField: 'time',
  yField: 'value',
  seriesField: 'category',
  smooth: true,
  areaStyle: { opacity: 0.6 },
  legend: { position: 'top-right' },
};
return <Area {...config} />;

4.5 散点图(Scatter)

tsx 复制代码
import { Scatter } from '@ant-design/charts';

const config = {
  data,
  xField: 'sepalLength',
  yField: 'sepalWidth',
  colorField: 'species',
  size: 5,
  shape: 'circle',
  tooltip: { showMarkers: false },
  state: {
    active: { style: { lineWidth: 3 } },
  },
};
return <Scatter {...config} />;

五、动态更新数据

React 中直接通过状态改变 data 即可触发图表更新,无需手动调用 API:

tsx 复制代码
const Demo = () => {
  const [data, setData] = useState(initialData);
  useEffect(() => {
    setTimeout(() => {
      setData(newData);  // 图表自动重绘
    }, 3000);
  }, []);
  return <Line {...{ data, xField:'x', yField:'y' }} />;
};

六、高级功能

6.1 交互(Interactions)

tsx 复制代码
interactions: [
  { type: 'brush' },              // 框选
  { type: 'zoom-canvas' },        // 缩放
  { type: 'element-highlight' },  // 悬停高亮
];

6.2 注解(Annotations)

tsx 复制代码
annotations: [
  {
    type: 'text',
    position: ['2020-01-02', 50],
    content: '峰值',
    style: { fill: 'red', fontSize: 12 },
  },
  {
    type: 'line',
    start: ['min', 40],
    end: ['max', 40],
    style: { stroke: '#aaa', lineDash: [4,4] },
  },
];

6.3 自定义主题

tsx 复制代码
import { registerTheme } from '@ant-design/charts';

registerTheme('my-theme', {
  colors10: ['#5B8FF9', '#61DDAA', ...],
  styleSheet: { brandColor: '#5B8FF9' },
});

const config = { theme: 'my-theme', data, xField:'x', yField:'y' };
return <Line {...config} />;

七、小结

  • 安装与引入@ant-design/charts,按需导入 React 组件。
  • 通用配置dataxField/yFieldseriesFieldcolorFieldmetatooltiplegendinteractionsannotationsstateanimationtheme
  • 常用图表LineColumnPieAreaScatter 等,配置方式高度一致。
  • 动态更新 :直接通过 React state 更改 data 即可。
  • 高级扩展:交互、注解、自定义主题满足各种可视化需求。
相关推荐
北海-cherish13 小时前
Wouter 和 React Router的区别
前端·react.js·前端框架
入秋20 小时前
Three.js 实战之电子围栏可根据模型自动生成
前端·前端框架·three.js
fcm1921 小时前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
郝学胜-神的一滴1 天前
解析前端框架 Axios 的设计理念与源码
开发语言·前端·javascript·设计模式·前端框架·软件工程
林太白1 天前
NestJS-身份验证JWT的使用以及登录注册
前端·后端·前端框架
Mintopia1 天前
🚀 cesium-kit:让 Cesium 开发像写 UI 组件一样简单
前端·前端框架·cesium
不老刘1 天前
从构建工具到状态管理:React项目全栈技术选型指南
前端·react.js·前端框架
知识分享小能手1 天前
React学习教程,从入门到精通,React 前后端交互技术详解(29)
前端·javascript·vue.js·学习·react.js·前端框架·react
打小就很皮...1 天前
React实现文本markdownit形式
前端·react.js·前端框架
Restart-AHTCM2 天前
ES6核心基础
vue.js·前端框架·es6