安装 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',
},
};
- 异步获取数据
- 在切换设备时,可以重新获取数据
- 使用 api 文件中的封装
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");
},
},
微信关注我哦 👍
我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式