bug分析:React中对bizchart宽度压缩问题

bug分析专栏:最近在项目上的bug出现的比较多,想着可以记录一下各种奇怪五花八门的bug的分析和解决方案,越发的觉得对bug的分析和解决更能提升代码的逻辑思维,尤其是对于一个自己不熟悉的项目,react写的也比较少,刚上手的项目就让我直接改bug,确实是一个挑战,针对各种bug做一个简单的记录。

问题描述

在业务中出现了一个图标的宽度发生改变的问题。具体表现为曲线图中,x轴的坐标数据都挤在一块,导致整个图标的宽度变得很小。但是可以看出我们的图表整体的数据仍然存在,x轴和y轴的数据也没有问题。

这个问题是由于图标的宽度变化引起的,导致坐标数据显示异常。接下来记录一下对该问题的分析和解决。

业务代码

js 复制代码
<Chart
        height={500}
        padding={['2%', 'auto', '30%', 'auto']}
        style={{ width: '100%' }}
        data={props.tempValusData}
        scale={props.chartcols}
        forceFit
      >
        <Legend position="bottom" />

分析BUG

1.出现概率:问题出现的复现率不是百分百,只是单单这个表格出现了宽度的变化,

  1. x轴坐标数据挤在一块: 由于图标宽度的改变,x轴上的坐标数据被挤在一块,导致显示异常。

  2. 整体图标宽度变得很小:虽然宽度改变了,但是整体的数据没有发生变化,问题仅仅表现在图标压缩了。

问题定位

第一猜测是canvas的宽度设置了固定宽度,但是可以看到在Chart的元素中只有高度的一个声明,没有对宽度的一个限制

并且其他的chart没有出现宽度的压缩

再次对比了一下正常的chart,发现出现问题的图表下方的lengend标签,貌似超过了父级div的宽度,导致部分lengend没有显示完整

可以看到标签的长度已经超出并且被隐藏,到这里笔者觉得就是这里出现的问题

下方的标签长度太长超过了外层父级div,导致上层的图表被压缩,有经验的开发者应该也会遇到过这个问题

解决流程

问题解决之前不清楚标签使用的元素是什么,所以到官网查一下

可以看到代表的是legend元素

定位到的问题是legend的长度过长,那么就需要对legend的元素进行处理

在legend标签中可以看到有一个itemFormatter的传参,这个是用于处理标签的返回的,在这里对长度进行一个处理,如果超过了20个的字数,就进行省略的操作

js 复制代码
  const legendItemFormatter = val => {
    // 在这里进行字符串截断或其他处理,确保文本长度不超过你想要的长度
    const maxLength = 20;
    return val.length > maxLength ? val.slice(0, maxLength) + '...' : val;
  };
  return (
    <>
      <Chart
        height={500}
        padding={['2%', 'auto', '30%', 'auto']}
        style={{ width: '100%' }}
        data={props.tempValusData}
        scale={props.chartcols}
        forceFit
      >
        <Legend position="bottom" itemFormatter={legendItemFormatter} />

解决效果

解决完成后效果如下,确实图表的压缩是由于下方legend的超出把图标挤在一起了,使用itemFormatter来对legend返回的标签做处理,做出长度限制即可。

🙏 感谢您花时间阅读这篇文章!如果觉得有趣或有收获,请关注我的更新,给个喜欢和分享。您的支持是我写作的最大动力!

往期好文推荐

相关推荐
望获linux4 分钟前
【实时Linux实战系列】实时 Linux 在边缘计算网关中的应用
java·linux·服务器·前端·数据库·操作系统
qq_252924196 分钟前
PHP 8.0+ 现代Web开发实战指南 引
android·前端·php
Jeled6 分钟前
Android 本地存储方案深度解析:SharedPreferences、DataStore、MMKV 全面对比
android·前端·缓存·kotlin·android studio·android jetpack
Mintopia7 分钟前
🎨 AIGC 内容过滤技术:当创作的洪流遇上理性的堤坝
前端·javascript·aigc
绝无仅有12 分钟前
面试真实经历某商银行大厂数据库MYSQL问题和答案总结(二)
后端·面试·github
Mintopia13 分钟前
⚙️ Next.js 缓存与队列:当数据与请求跳起“低延迟之舞”
前端·全栈·next.js
绝无仅有14 分钟前
通过编写修复脚本修复 Docker 启动失败(二)
后端·面试·github
Shi_haoliu22 分钟前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
老K的Java兵器库26 分钟前
并发集合踩坑现场:ConcurrentHashMap size() 阻塞、HashSet 并发 add 丢数据、Queue 伪共享
java·后端·spring
冷冷的菜哥43 分钟前
go邮件发送——附件与图片显示
开发语言·后端·golang·邮件发送·smtp发送邮件