问题复现
最近在使用 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
/>部分数据如下：
| field | value | time |
|---|---|---|
| st | 53.4 | 2022-02-19T05:09:40.000Z |
| st | 104.4 | 2022-02-19T05:10:10.000Z |
| st | 162.6 | 2022-02-19T05:10:40.000Z |
| st | 211.2 | 2022-02-19T05:11:10.000Z |
| se | 1.7528 | 2022-02-19T05:09:40.000Z |
| se | 1.8257 | 2022-02-19T05:10:10.000Z |
| se | 1.9575 | 2022-02-19T05:10:40.000Z |
| ur | 166.6085121 | 2022-02-19T04:38:40.000Z |
| ur | 167.4594175 | 2022-02-19T04:39:10.000Z |
| ur | 168.2521543 | 2022-02-19T04:39:40.000Z |
| ur | 169.0384365 | 2022-02-19T04:40:10.000Z |
| ur | 169.9094436 | 2022-02-19T04:40:40.000Z |
| ur | 170.723133 | 2022-02-19T04:41:10.000Z |
| ur | 171.5912805 | 2022-02-19T04:41:40.000Z |
| ur | 172.4221169 | 2022-02-19T04:42:10.000Z |
| ur | 173.2827877 | 2022-02-19T04:42:40.000Z |
数据我们从 InfluxDB 取出后为了方便前端处理，将 List<FluxTable> 通过 Stream Reduce
流处理为了 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 字段，发现飞线消失了，变成了三段数据在图表中横向分布在图表中！
问题解决
于是便产生了对数据进行处理的想法，随后便将 data 按照 time 进行了排序，由于 time 本身为时间字符串，所以需要用 moment 处理为 unix 毫秒时间戳：
result.map(record => ({
...record,
time: moment(record.time).unix() * 1000,
})).sort((x, y) =>
x.time - y.time
)果然数据变成了我们预期的效果：
对于部分特别复杂的数据，建议设置 漂亮的螺 旋 线 奇 观（雾
smooth={false}，否则会产生问题复盘
针对 AntV 的数据处理方式，以后对于 AntV 的 多折线图、堆积面积图要对数据进行排序后再使用，其中：
- 多折线图对 x 轴进行排序
- 堆积面积图对 seriesField 进行排序