问题

最近在使用 g2plot 来做数据图表展现，然后遇到一个奇怪的问题。就是数据图出来了，但是图例却显示异常。如下图，应该只有两个维度，但是却显示了三个图例，且后两个图例异常。

g2plot

代码

import { Line } from '@antv/g2plot';

const data = [
  { legend: '2021-09-19', x: '次留', y: 0.36 },
  { legend: '2021-09-19', x: '3留', y: 0.29714285714285715 },
  { legend: '2021-09-19', x: '4留', y: 0.26285714285714284 },
  { legend: '2021-09-19', x: '5留', y: 0.21142857142857144 },
  { legend: '2021-09-19', x: '6留', y: 0.19428571428571428 },
  { legend: '2021-09-19', x: '7留', y: 0.17142857142857143 },
  { legend: '2021-09-19', x: '8留', y: 0.17714285714285713 },
  { legend: '2021-09-19', x: '9留', y: 0.17714285714285713 },
  { legend: '2021-09-19', x: '10留', y: 0.17714285714285713 },
  { legend: '2021-09-19', x: '11留', y: 0.17142857142857143 },
  { legend: '2021-09-19', x: '12留', y: 0.16 },
  { legend: '2021-09-19', x: '13留', y: 0.13142857142857142 },
  { legend: '2021-09-19', x: '14留', y: 0.12571428571428572 },
  { legend: '2021-09-19', x: '15留', y: 0.13142857142857142 },
  { legend: '2021-09-19', x: '30留', y: 0.09714285714285714 },
  { legend: '总计平均', x: '次留', y: 0.47718673492098823 },
  { legend: '总计平均', x: '3留', y: 0.3035152900828808 },
  { legend: '总计平均', x: '4留', y: 0.26802000588408353 },
  { legend: '总计平均', x: '5留', y: 0.2829854969932791 },
  { legend: '总计平均', x: '6留', y: 0.27874847622917515 },
  { legend: '总计平均', x: '7留', y: 0.2388374052232519 },
  { legend: '总计平均', x: '8留', y: 0.22660944206008585 },
  { legend: '总计平均', x: '9留', y: 0.2170305676855895 },
  { legend: '总计平均', x: '10留', y: 0.20822162645218945 },
  { legend: '总计平均', x: '11留', y: 0.1989076012744652 },
  { legend: '总计平均', x: '12留', y: 0.18408662900188325 },
  { legend: '总计平均', x: '13留', y: 0.1885603490063015 },
  { legend: '总计平均', x: '14留', y: 0.18236775818639797 },
  { legend: '总计平均', x: '15留', y: 0.17266562336984873 },
  { legend: '总计平均', x: '30留', y: 0.08823529411764706 },
]
const line = new Line('container', {
  data,
  padding: 'auto',
  xField: 'x',
  yField: 'y',
  seriesField: 'legend',
});

line.render();

解决方案

在官方文档中没有找到确切的原因，但是大致上认为是连续图例搞的鬼。于是我给所有的时间维度掐面加上空格：

import { Line } from '@antv/g2plot';

const data = [
  { legend: ' 2021-09-19', x: '次留', y: 0.36 },
  { legend: ' 2021-09-19', x: '3留', y: 0.29714285714285715 },
  { legend: ' 2021-09-19', x: '4留', y: 0.26285714285714284 },
  { legend: ' 2021-09-19', x: '5留', y: 0.21142857142857144 },
  { legend: ' 2021-09-19', x: '6留', y: 0.19428571428571428 },
  { legend: ' 2021-09-19', x: '7留', y: 0.17142857142857143 },
  { legend: ' 2021-09-19', x: '8留', y: 0.17714285714285713 },
  { legend: ' 2021-09-19', x: '9留', y: 0.17714285714285713 },
  { legend: ' 2021-09-19', x: '10留', y: 0.17714285714285713 },
  { legend: ' 2021-09-19', x: '11留', y: 0.17142857142857143 },
  { legend: ' 2021-09-19', x: '12留', y: 0.16 },
  { legend: ' 2021-09-19', x: '13留', y: 0.13142857142857142 },
  { legend: ' 2021-09-19', x: '14留', y: 0.12571428571428572 },
  { legend: ' 2021-09-19', x: '15留', y: 0.13142857142857142 },
  { legend: ' 2021-09-19', x: '30留', y: 0.09714285714285714 },
  { legend: '总计平均', x: '次留', y: 0.47718673492098823 },
  { legend: '总计平均', x: '3留', y: 0.3035152900828808 },
  { legend: '总计平均', x: '4留', y: 0.26802000588408353 },
  { legend: '总计平均', x: '5留', y: 0.2829854969932791 },
  { legend: '总计平均', x: '6留', y: 0.27874847622917515 },
  { legend: '总计平均', x: '7留', y: 0.2388374052232519 },
  { legend: '总计平均', x: '8留', y: 0.22660944206008585 },
  { legend: '总计平均', x: '9留', y: 0.2170305676855895 },
  { legend: '总计平均', x: '10留', y: 0.20822162645218945 },
  { legend: '总计平均', x: '11留', y: 0.1989076012744652 },
  { legend: '总计平均', x: '12留', y: 0.18408662900188325 },
  { legend: '总计平均', x: '13留', y: 0.1885603490063015 },
  { legend: '总计平均', x: '14留', y: 0.18236775818639797 },
  { legend: '总计平均', x: '15留', y: 0.17266562336984873 },
  { legend: '总计平均', x: '30留', y: 0.08823529411764706 },
]
const line = new Line('container', {
  data,
  padding: 'auto',
  xField: 'x',
  yField: 'y',
  seriesField: 'legend',
});

line.render();

然后结果显示正常：