为了更好地使用 Ant Design Charts 进行数据可视化，我们需要了解 Ant Design Charts 图表的组成以及相关概念。

图表组件

下面是一个基本的 Ant Design Charts 图表，图表由 组件（Component） 和 标记（Mark） 组成。

需要特别注意的是，Ant Design Charts 2.0 中不再需要单独配置标注（Annotation） ，标注也是一种标记，或者说某些标记也也可以用来做标注，比如 Text，Image， Line 等标记。

标题 title

用于一句话概要说明图表要展示的数据，图表的标题是比较常用的组件，支持标题和副标题，以及他们的样式和位置设置。

查看 Title 教程获取更多信息。

坐标轴 axis

绘制坐标轴，目前支持直角坐标系坐标轴与极坐标系坐标轴。

每个坐标轴由坐标轴线（line）、刻度（tick）、刻度值（label）、标题（title）以及网格线（grid）组成。

查看 Axis 教程获取更多信息。

图例 legend

绘制图例，Ant Design Charts 提供了两种图例类型：分类图例（Category Legend）和连续图例（Continuous Legend），分别用于展示分类数据和连续数据。

查看 Legend 教程获取更多信息。

滚动条 scrollbar

滚动条（scrollbar）是一个交互组件，当显示区域大小不足以容纳全部信息时，可以将超出部分隐藏，并通过滚动条的垂直或横向滑动来显示出被隐藏部分。

内容是否超出显示区域取决于内容的多少以及显示区域的尺寸，当需要显示的内容在纵向方向上超过显示区域的大小时，应当使用垂直滚动条以控制显示的部分，横向滚动条同理。

查看 Scrollbar 教程获取更多信息。

缩略轴 slider

缩略轴（slider）是一种辅助看数据的组件，它将大量数据浓缩到一个轴上，既可以缩小宏观看数据全貌，又可以放大微观看数据的片段，同时还可以拖拽观察数据在一定区间内的演变。

缩略轴是值域数据的浓缩，它跟位置通道 x, y 对应的比例尺的类型息息相关。一般来说时间类型上使用缩略轴的频率高，连续轴使用缩略轴频次低、分类轴几乎不会使用到缩略轴。

查看 Slider 教程获取更多信息。

提示信息 tooltip

当鼠标悬停在某个点上时，会以提示框的形式显示当前点对应的数据的信息，比如该点的值，数据单位等。数据提示框内提示的信息还可以通过格式化函数动态指定。

查看 Tooltip 教程获取更多信息。

数据标签 label

Ant Design Charts 中数据标签（Label） 是给图表添加标注的手段之一。

查看 Label 教程获取更多信息。

图表方法

获取图表实例

图表实例用于后续事件监听、绑定、图表下载等，目前提供 2 种获取方式。

1. 通过 onReady 获取

const config = {
  ...,
  xField: 'date',
  onReady: ( plot ) => {
    const { chart } = plot;
    chart.on('element:click', (evt) => {
      console.log(evt.target)
    })
  }
}

2. 通过 ref 获取

const ref = useRef(null);
return <Line {...config} ref={ref} />;

图表下载

1. 图片下载

const DemoChangeData = () => {
  const chartRef = React.useRef(null);
  const config = {
    onReady: ({ chart }) => (chartRef.current = chart),
    ...
  };
  return (
    <div>
      <button
        onClick={() => {
          /**
          * Download Image
          * @param {string} name A name of image
          * @param {string} type A DOMString indicating the image format. The default format type is image/png.
          * @param {number} encoderOptions A Number between 0 and 1 indicating the image quality
          */
          chartRef.current.downloadImage('image', 'image/png', 1);
        }}
      >
        图表下载
      </button>
      <Line {...config} />
    </div>
  );
};

2. 获取 base64 数据

const DemoChangeData = () => {
  const chartRef = React.useRef(null);
  const config = {
    onReady: ({ chart }) => (chartRef.current = chart),
    ...
  };
  return (
    <div>
      <button
        onClick={() => {
          /**
          * Get data base64
          * @param {string} type A DOMString indicating the image format. The default format type is image/png.
          * @param {number} encoderOptions A Number between 0 and 1 indicating the image quality
          */
          chartRef.current.toDataURL('image', 1);
        }}
      >
        获取图表 base64 数据
      </button>
      <Line {...config} />
    </div>
  );
};

图表更新

1. useState

组件基于 React 封装，只需调用 React.useState 进行数据更新即可达到更新效果，在部分情况下需结合 React.memo 避免二次渲染，可参考。

const DemoChangeData = () => {
  const [data, setData] = React.useState(defaultData);

  const config = {
    data,
    ...
  };

  return (
    <div>
      <button
        onClick={() => {
          setData(newData);
        }}
      >
        数据更新
      </button>
      <Line {...config} />
    </div>
  );
};

2. changeData

也可以通过获取图表实例，直接调用 changeData 实现。

const DemoChangeData = () => {
  const chartRef = React.useRef(null);
  const config = {
    data,
    onReady: ({ chart }) => (chartRef.current = chart),
    ...
  };
  return (
    <div>
      <button
        onClick={() => {
          chartRef.current.changeData(newData);
        }}
      >
        数据更新
      </button>
      <Line {...config} />
    </div>
  );
};

图表布局

视图模型

在 Ant Design Charts 中，视图模型 用于定义图表视图的划分方式，根据划分生成的不同区域可以绘制不同的内容，并通过相应选项进行配置。可以将视图简单理解为一个独立的图表。Ant Design Charts 的视图模型结构如下：

• 视图区域（View Area）：表示图表的整体视图区域。在设置图表的宽度和高度时，生效的范围即为视图区域的宽度和高度。视图区域与绘制区域之间的部分称为 外边距范围，该区域的大小可通过配置 margin 属性进行调整，通常用于设置固定组件（如坐标轴、图例等）与边界的距离。

• 绘制区域（Plot Area）：表示图表的绘制区域。绘制区域与主区域之间的部分称为 内边距范围，该区域的大小可通过配置 padding 属性进行调整，通常用于绘制图表组件，例如title、legend、axis等。

• 主区域（Main Area）：表示图表内容绘制的主要区域。主区域与内容区域之间的部分称为 呼吸范围，该区域的大小可通过配置 inset 属性进行调整，用于制造组件和标记（图形元素）的间距，从而防止重叠，对于散点图尤其有用。

• 内容区域（Content Area）：表示标记绘制的内容区域。主要用于绘制标记（图形元素）。

其中内容区域的大小由以下的公式得到：

const contentWidth = width - paddingLeft - paddingRight - marginLeft - marginRight - insetLeft - insetRight;

const contentHeight = height - paddingTop - paddingBottom - marginTop - marginBottom - insetTop - insetBottom;

布局算法

Ant Design Charts 在内部自己实现了一套布局算法，负责协调外边距（ margin ）、内边距（ padding ）、呼吸范围宽度（ inset ）等布局参数的计算，确保坐标轴、图例等组件在图表容器中合理布局。

动态计算

也许你曾经有过疑惑，为什么在配置里手动声明 padding 为 0， 图表的 x 轴显示不全了。要回答这个问题，需要深入探究 Ant Design Charts 布局算法里动态计算的部分。

在 Ant Design Charts 的布局算法中，首先会获取所有传入的 padding、margin、inset属性，如果没有设置，padding（包括 paddingTop、paddingLeft 等）会被默认赋值为 auto，margin 会被默认赋值为 16，而 inset 会被默认赋值为 0。接下来将图表组件按照位置进行分组，方便后续布局计算。

以 position = 'top' 为例，如果配置了明确的 paddingTop 时，不会触发动态计算 paddingTop 的逻辑，此时对于未定义 size 的组件，使用内部定义的默认尺寸 defaultSize；对于分组（group）组件，递归执行上述操作，然后取最大的子组件尺寸作为父组件的尺寸；如果组件中包括坐标轴（axis）组件且未显式设置 labelAutoHide，设置 labelAutoHide 为 true，自动隐藏坐标轴标签以避免溢出。

如果没有配置 paddingTop，则会触发动态计算的逻辑，根据组件的实际尺寸累加边距（crossPadding 默认为 12），得出最后的实际paddingTop 大小。

要回答最初的问题：在 Ant Design Charts 中，内边距范围（ padding ）用于为图表组件预留展示空间。如果手动将 padding 设置为 0 ，会关闭内部的自适应计算逻辑，从而可能导致图表组件显示不完整。因此，当需要个性化配置时，应确保为组件预留足够的空间；否则，建议使用默认的自适应逻辑来避免显示问题。

防挤压机制

Ant Design Charts 内部对于图表显示区域设置了一个兜底机制，当视图中存在标记元素（如line、interval等），触发防挤压机制，来确保图表的主区域（Main Area）最小占比 1/4 。以水平方向为例，假设绘制区域的大小为 plotWidth，如果 plotWidth 减去动态计算后的左内边距 pl0 和 右内边距 pr0 后小于 plotWidth * 1/4 时，会优先保证主区域大小为 plotWidth * 1/4，将内边距等比例缩小，当用户指定 paddingLeft 时会动态计算 paddingRight 的大小，按比例分配剩余空间，尽量避免左右外边距同时设置为固定值，可能会导致自适应算法失效。垂直方向的计算规则同理。

通用配置项

autoFit

如果希望图表的宽高和容器保持一致，那么可以将 options.autoFit 设置为 true，其优先级低于指定宽高。

viewStyle

配置图表的视图样式。

view

配置图表的视图区域的样式。

plot

配置图表的绘制区域的样式。

main

配置图表的主区域的样式。

content

配置图表的内容区域的样式。

在配置视图样式的时候，不是以对象的形式来配置，而是以 view、plot、main、content前缀加属性的方式来配置。

({
  viewStyle: {
    // 配置图表的视图区域的样式
    viewFill: '#DCEEFE',
    viewRadius: 50,

    // 配置图表的绘制区域的样式
    plotFill: '#fff',
    plotFillOpacity: 0.45,
    plotStroke: 'yellow',
    plotLineWidth: 4,

    // 配置图表的主区域的样式
    mainFill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
    mainFillOpacity: 0.75,

    // 配置图表的内容区域的样式
    contentFill: 'l(90) 0:#ffadad 0.5:#ffd6a5 1:#fdffb6',
    contentShadowColor: '#5d5d5d',
    contentShadowBlur: 40,
    contentShadowOffsetX: 5,
    contentShadowOffsetY: 5,
  },
});