Antd Pro 中嵌入多折线图表

发布时间: 2021-06-24 09:10:51 作者: 大象笔记

安装 Ant Design Charts 依赖

参考

https://charts.ant.design/zh-CN/guide/start

tyarn add @ant-design/charts

多数据曲线

Ant Design Charts 并没有给出同一图表多条曲线的配置方法。

查了一下,Ant Design Charts 是基于 G2Plot 的,所以看一下 G2Plot 的文档。

Ant Design Charts 是 G2Plot 的 React 版本,基于 React、TypeScript 封装了所有的 G2Plot 图表,继承了 G2Plot 的所有配置,对 React 技术栈的同学更加友好

https://antv-g2plot.gitee.io/zh/examples/line/multiple#line-large-data

参考示例中的请求数据

多折线数据:

[
  {
    "year": "1850",
    "value": 0,
    "category": "Liquid fuel"
  },
  {
    "year": "1850",
    "value": 54,
    "category": "Solid fuel"
  },
  {
    "year": "1850",
    "value": 0,
    "category": "Gas fuel"
  },
  ...
]

单折线数据:

[
    { 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 },
]

对比可见,多折线数据多了一个 category 字段。对应的需要在配置中添加:

seriesField: 'category',

如何异步加载数据

示例中是写死了数据,如何通过异步接口获取数据呢?

const Metrics: React.FC = () => {
  const 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 },
  ];

  const config = {
    data,
    height: 400,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };

React Function Component 中异步加载数据

找到的一个非常非常详细的教程,作者不愧是专业写教程的:

https://www.robinwieruch.de/react-hooks-fetch-data

前提是要 了解 React Effect Hook

如何判断 Antd Pro 搜索条件变化

https://procomponents.ant.design/components/table#%E6%9F%A5%E8%AF%A2%E8%A1%A8%E6%A0%BC

有个 ProTable 有个 beforeSearchSubmit 的属性。

beforeSearchSubmit={(args) => {
	console.log(args);
	return args;
}}

可以在这里对搜索参数进行记录,当发生变化时重新异步获取图表数据。

既然可以监听到提交搜索,那实际上我都不需要再使用 useEffect,可以直接这里发起请求, 然后将返回数据进行 setData。而且还能够在此处一并限制了时间区间范围。

      beforeSearchSubmit={(args) => {
        if (args.DeviceId) {
          setLineVisible(true);
          (async (args) => {
            let result = await getLineMetrics(args);
            setLineData(result);
          })(args);
        } else {
          setLineVisible(false);
        }
        return args;
      }}

如何设置字段别名

https://github.com/antvis/G2Plot/issues/702

鼠标悬浮时的 title 时间格式设置

https://antv-g2plot.gitee.io/zh/docs/api/plots/line#title

tooltip: {
  title: (title) => {
	return moment(title).format("YYYY-MM-DD HH:mm:ss.SSS");
  },
},
我是一名山东烟台的开发者,联系作者