表格宽度超出屏幕宽度时绘制图形不完全

产品：SpreadJS
版本：17.0.3
调研编号：SJS-26903
Last Review：2024-10-17
当前进展：非问题，已提供解释说明。

当整个表格的宽度大于屏幕宽度时，绘制的图形绘制不全，小于或等于屏幕宽度时绘制的图形没有问题，src>views>shuiwei.vue注释第205行代码开放204行正常，取消注释后，图形绘制不完整。

您好！经调研，通过Worksheet:getCellRect()获取单元格的坐标有一个前提，即单元格需要显示在浏览器页面视窗内，如果未显示，则后获取结果为undefined。

在为单元格设置固定列宽时，73列单元格尚不可见，Worksheet:getCellRect()结果为undefined。为单元格设置了动态列宽后，被设置动态列宽的单元格将均分页面列宽，形同可见，便可根据内部计算逻辑得到窗口中还未显示的单元格的坐标。

综上所述，您可以使用动态列宽满足需要。如果要对单元格设置固定列宽，您可以自定义实现计算逻辑，即通过for循环和固定列宽依次计算相关单元格的坐标，以此替代使用Worksheet:getCellRect()获取单元格坐标。

您好！我们需要根据您提供的demo分析下，之后会及时向您同步结论，请您耐心等候！

您好！您demo中原本注释了第205行设置动态列宽代码，而使用了第206行设置列宽为25的代码，复现了问题，线条绘制在日期为03/13的单元格处停止。之后，我们注释了第206行代码、使用第205行代码运行，可以正常绘制。

通过debug，发现在03/13单元格之后便跳跃至04/30单元格绘制，在绘制之前根据单元格日期数据计算得到的列数为73，符合事实，但是通过Worksheet:getCellRect()获取73列的坐标时结果为undefined，导致待绘制线条的坐标位置计算结果为NaN，这才无法绘制。而通过动态设置列宽可以解决这个问题，至于问题原因，我们调研后向您同步结论，请您耐心等候。

试试这个

1. getCumulativeColumnWidth(sheet, calcColumn, hasRowHeader) {
   
2.   var width = 0;
   
3.   for (var i = 0; i <= calcColumn; i++) {
   
4.     if (sheet.getColumnVisible(i)) {
   
5.       width += sheet.getColumnWidth(i);
   
6.     }
   
7.   }
   
8.   if (hasRowHeader) {
   
9.     for (var j = 0; j < sheet.getColumnCount(0, GC.Spread.Sheets.SheetArea.rowHeader); j++) {
   
10.       if (sheet.getColumnVisible(i, GC.Spread.Sheets.SheetArea.rowHeader)) {
    
11.         width += sheet.getColumnWidth(i, GC.Spread.Sheets.SheetArea.rowHeader);
    
12.       }
    
13.     }
    
14.   }
    
15.   return width;
    
16. },

复制代码

您好！由于您较长时间未回复，且从跟帖回复中了解到问题已得到有效解答，那就结帖了。如有新问题，欢迎发新帖沟通。