问题
最近在使用 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();
然后结果显示正常：
结果
最后
其实我这么写是不严谨的，没有去看源码取证，也应该有办法修改图例的类型。但官方文档对于连续图例也说的很不明确。不过暂时而言以上方法的确解决了我的问题。如果有更好的解决方案环境留言讨论~
网友评论