概述

Ant Design Charts 的数据源来源有两种，一种是 inline，即直接传入具体的数据，这种是 Ant Design Charts 默认的数据源类型；另外一种数据源类型是 fetch，即从远程接口获取数据。

Ant Design Charts 的 fetch 支持从远程接口获得数据，让数据源具备一定的动态性，支持 JSON、CSV 等格式解析，适配多场景数据集成，提升大屏、监控等应用的开发效率与交互体验。配置上，根据 value 指定的 url 获取远程的数据。可以通过 format 去指定数据类型，Ant Design Charts 默认会根据 value 指定的文件后缀名去推断数据类型，记得保证远程的地址没有设置鉴权。

使用方式

直接在设置数据得时候，传入一个对象，并设置类型 type 为 fetch。

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

开始使用

举一个例子如下：

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

const Demo = () => {

  const config ={
      data: {
        type: 'fetch',
        value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
      },
      xField: 'weight',
      yField: 'height',
      colorField: 'gender'
  };

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

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

配置项

在 fetch 实现上，如果 format 为 json，则使用 JavaScript 的 fetch API 然后将返回值转成 JSON Object；如果 format 为 csv，则调用 d3-dsv 去解析接口返回值。