overview

Ant Design Charts 中的数据（Data） 主要用于指定需要可视化的数据和数据转换（预处理）。

使用方式

配置数据主要有两种方式。

第一种：直接传入具体的数据，这种是 Ant Design Charts 默认的数据源类型。

({
  data: [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ],
});

第二种：设置 type: fetch，这种方式定义了一个远程连接器，从远程接口获得数据，让数据源具备一定的动态性，支持 JSON、CSV 等格式解析，适配多场景数据集成，提升大屏、监控等应用的开发效率与交互体验。

({
  data: {
    type: 'fetch', // 指定 fetch 类型
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json', // 远程地址
  },
});

配置层级

数据可以指定在 View 层级：

({
  data: [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ],
});

视图绑定的数据具有传递性：会传递给 view.children 里面的标记，如果该标记没有数据，那么就设置其数据，否则没有任何影响。这意味着对于共享数据的标记，可以把数据和视图绑定。

import { Line } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
      autoFit: true,
      data: [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 },
      ],
      children: [
        { type: 'line', encode: { x: 'year', y: 'value' } },
        { type: 'point', encode: { x: 'year', y: 'value' } },
      ]
  };

  return <Line {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

也可以指定在 Mark 层级，这意味着我们可以在一个视图中可视化多份数据，比如下面的区间标注图：

import { Line } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
      autoFit: true,
      children: [
        {
          type: 'rangeX',
          data: [
            { year: [new Date('1933'), new Date('1945')], event: 'Nazi Rule' },
            {
              year: [new Date('1948'), new Date('1989')],
              event: 'GDR (East Germany)',
            },
          ],
          encode: { x: 'year', color: 'event' },
          scale: { color: { independent: true, range: ['#FAAD14', '#30BF78'] } },
          style: { fillOpacity: 0.75 },
          tooltip: false,
        },
        {
          type: 'line',
          data: {
            type: 'fetch',
            value: 'https://assets.antv.antgroup.com/g2/year-population.json',
          },
          encode: { x: (d) => new Date(d.year), y: 'population', color: '#333' },
        },
      ]
  };

  return <Line {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

DataTransform

一个完整的数据声明由两部分构成：连接器（Connector） 和数据转换（DataTransform） 。其中连接器是获得数据的方式，通过 data.type 指定，数据转换是预处理函数，通过 data.transform 指定。

({
  data: {
    type: 'fetch', // 指定连接器类型
    // 指定连接器的值
    value:
      'https://gw.alipayobjects.com/os/basement_prod/6b4aa721-b039-49b9-99d8-540b3f87d339.json',
    transform: [
      // 指定转换，可以多个
      { type: 'filter', callback: (d) => d.sex === 'gender' },
      {
        type: 'sort',
        callback: (a, b) => b.a - a.a,
      },
    ],
  },
});

目前 Ant Design Charts 内置的数据转换有以下几种：

type	描述	属性
custom	自定义数据处理逻辑，允许用户定义自己的操作方式	custom
ema	计算指数移动平均值，用于数据平滑处理	ema
filter	筛选数据，根据条件过滤掉不符合要求的数据	filter
fold	将多个字段展开成按照指定的 `key` `value` 组织形式，便于处理和分析	fold
join	合并两个数据表，根据某些条件关联相应的数据行	join
kde	估算数据分布的密度，通常用于概率密度分析	kde
log	将当前数据变换流中的片面数据打印到控制台，用于开发者调试数据处理过程	log
map	对数据进行映射操作，将某种值转换为另一种值	map
pick	从数据中选择指定的字段，用于提取特定信息	pick
rename	重命名数据字段，便于后续处理和阅读	rename
slice	截取数据的部分范围，相当于数据的分页或裁剪	slice
sort	对数据进行排序处理，支持自定义排序规则	sort
sortBy	按照指定的字段进行排序	sortBy

示例

如何使用第三方库绘制统计回归线？

借助自定义数据转换能力，我们可以配置：

({
  data: {
    transform: [
      {
        type: 'custom',
        callback: customFn(), // 自定义的数据处理函数
      },
    ],
  },
});

这里的customFn可以使用外部的数据处理相关的库，极大地拓展了 Ant Design Charts 的数据处理能力。下面的例子中，我们使用第三方库 d3-regression 来生成线性统计回归线：

import { regressionLinear } from 'd3-regression';

{
  // 利用 D3 的 regressionLinear 对数据进行线性回归处理
  transform: [
    {
      type: 'custom',
      callback: regressionLinear(),
    },
  ],
};

更多统计回归线案例见数据分析-回归线。