关于g2plot 各图 x轴展示完整, 但是y轴展示不全的问题,包含鼠标悬浮图表错位

开发时遇到的问题如标题所说

先说解决方案:

1.如果x轴 是数字 第一个必须是0,否则y轴将会少一块

2.尽量将x轴 设为 string类型,也就是字符串

例如:

let inidD = [
    { month: 1, revenue: 1322, name: "2022每月产出" },
    { month: 2, revenue: 1333, name: "2022每月产出" },
    { month: 3, revenue: 22, name: "2022每月产出" },
    { month: 4, revenue: 512, name: "2022每月产出" },
    { month: 5, revenue: 543, name: "2022每月产出" },
    { month: 6, revenue: 132, name: "2022每月产出" },
    { month: 7, revenue: 3437, name: "2022每月产出" },
    { month: 8, revenue: 2111, name: "2022每月产出" },
    { month: 9, revenue: 335, name: "2022每月产出" },
    { month: 10, revenue: 37, name: "2022每月产出" },
    { month: 11, revenue: 3464, name: "2022每月产出" },
    { month: 12, revenue: 600, name: "2022每月产出" },
    
  ];

 const linePlot = new Line('container', {
            data: inidD,
            xField: 'month',
            yField: 'revenue',
            seriesField: 'name',
            legend: {
              position: 'top-right',
            },
            animation: {
              appear: {
                animation: 'wave-in',
                duration: 3000,
              },
            },
          });

 linePlot.render();

x轴是 month 字段. y轴是 revenue 字段,执行渲染后就会少一条y轴数据

并且鼠标悬浮图表会出现错位

 可以采用方案1 不转换字符串,改成第一条数据x轴为0

推荐直接采取方案2 将x轴转换成字符串即可恢复正常

inidD.map(item => {
    item.month = item.month.toString()
})

总结:应该是个bug,希望官方能尽快修复

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值