纸伞下的烟雨 - React
type: channel
link: https://nian.jishu.xin/tag/React/
items: AntV 多折线图飞线、堆积面积图堆积顺序错乱 成因及解决方案

AntV 多折线图飞线、堆积面积图堆积顺序错乱 成因及解决方案
type: item
date: 2022-02-19T06:01:00+00:00
description: 问题复现最近在使用 AntV G6 做 InfluxDB 数据可视化的时候发现了一个奇怪的现象：从 InfluxDB 中查询出来的数据是按 field 字段分类并在 AntV G6 进行展示：<Line data={data} xField='time' yField='value' seriesField='field' xAxis={{ type: 'time', mask: 'HH:mm:ss' }} slider={{}} smooth />[collapse status="false" title="部分数据如下："]fieldvaluetimest53.42022-02-19T05:09:40.000Zst104.42022-02-19T05:10:10.000Zst162.62022-02-19T05:10:40.000Zst211.22022-02-19T05:11:10.000Zse1.75282022-02-19T05:09:40.000Zse1.82572022-02-19T05:10:10.000Zse1.95752022-02-19T05:10:40.000Zur166.60851212022-02-19T04:38:40.000Zur167.45941752022-02-19T04:39:10.000Zur168.25215432022-02-19T04:39:40.000Zur169.03843652022-02-19T04:40:10.000Zur169.90944362022-02-19T04:40:40.000Zur170.7231332022-02-19T04:41:10.000Zur171.59128052022-02-19T04:41:40.000Zur172.42211692022-02-19T04:42:10.000Zur173.28278772022-02-19T04:42:40.000Z[/collapse]数据我们从 InfluxDB 取出后为了方便前端处理，将 List<FluxTable> 通过 [font color="red"]Stream Reduce[/font]流处理为了 List<FluxRecord>，所以前端接受到的数据是按 field 的顺序排列出来的。问题排查百度搜索后，别人给出的经验是：存在 x 值相同的点。于是便使用了：const tmp = result.map(record => record.time); console.log(tmp.length, _.uniq(tmp).length);确认是否有重复。得到控制台输出 687 701，可见有 20 多个重复点。将这些重复的时间点对应的数据输出后发现分属于不同的 field，在每一个 field 中并不存在重复点，所以怀疑是 AntV 处理数据的问题。由于 x 轴本身指定 type: 'time'，于是便注释掉 xAsix 字段，发现飞线消失了，变成了[font color="aqua"]三段数据在图表中横向分布在图表中[/font]！问题解决于是便产生了对数据进行处理的想法，随后便将 data 按照 time 进行了排序，由于 time 本身为时间字符串，所以需要用 moment 处理为 unix 毫秒时间戳：result.map(record => ({ ...record, time: moment(record.time).unix() * 1000, })).sort((x, y) => x.time - y.time )果然数据变成了我们预期的效果：[scode type="green"]对于部分特别复杂的数据，建议设置 smooth={false}，否则会产生漂亮的螺 旋 线 奇 观（雾[/scode]问题复盘针对 AntV 的数据处理方式，以后对于 AntV 的 多折线图、堆积面积图要对数据进行排序后再使用，其中：多折线图对 x 轴进行排序堆积面积图对 seriesField 进行排序