一种解决图形报表热区偏移的方法及系统与流程

本发明涉及javascript领域，具体提供一种解决图形报表热区偏移的方法及系统。

背景技术：

1、目前浏览器支持的css缩放方式有zoom缩放和tranform:scale缩放，zoom只支持等比例缩放，缩放文字大小受浏览器最小字体限制，而transform:scale支持任意长宽比缩放，缩放字体大小不受浏览器最小字体限制，但只是视觉缩放，不改变元素原本的真实大小和位置。因此，对于缩放整个页面或较大页面区域的需求，常用zoom方式，可以保证页面元素、字体的美观，对于缩放单个元素的需求，常用transform:scale方式，更为灵活易用。

2、缩放整个页面，用zoom模式更为合适，但因为zoom缩放会使元素占据空间发生改变，而图形报表的热区却不会随之变化，因此zoom缩放之后便产生了热区的便移，导致图形热区使用时定位不准确。

技术实现思路

1、本发明是针对上述现有技术的不足，提供一种实用性强的解决图形报表热区偏移的方法。

2、本发明进一步的技术任务是提供一种设计合理，安全适用的解决图形报表热区偏移的系统。

3、本发明解决其技术问题所采用的技术方案是：

4、一种解决图形报表热区偏移的方法，首先进行zoom缩放局部还原，热区位置也随之恢复正常，将热区恢复之后，图形报表位置、占据空间发生改变，会改变整个页面的布局。

5、进一步的，进行zoom缩放局部还原，通过dom为图形报表的容器还原缩放，使整个容器内的图形报表准确地还原到缩放之前的位置，热区位置也随之恢复正常。

6、进一步的，想要再恢复布局，则应用transform:scale缩放的方式，将图形报表的容器再还原回之前的位置，因transform:scale不改变缩放元素的真实大小和位置，视觉效果的呈现上则不会存在热区偏移的情况。

7、进一步的，zoom缩放默认是以左上角为缩放的参照点，transform:scale缩放默认是相对于中心点的缩放，故应该将transform:scale缩放的参照点设为左上角，与zoom保持一致。

8、进一步的，通过transform将图形报表还原回原本的位置和视觉大小，解决zoom缩放带来的热区偏移问题。

9、一种解决图形报表热区偏移的系统，首先进行zoom缩放局部还原，热区位置也随之恢复正常，将热区恢复之后，图形报表位置、占据空间发生改变，会改变整个页面的布局。

10、进一步的，进行zoom缩放局部还原，通过dom为图形报表的容器还原缩放，使整个容器内的图形报表准确地还原到缩放之前的位置，热区位置也随之恢复正常。

11、进一步的，想要再恢复布局，则应用transform:scale缩放的方式，将图形报表的容器再还原回之前的位置，因transform:scale不改变缩放元素的真实大小和位置，视觉效果的呈现上则不会存在热区偏移的情况。

12、进一步的，zoom缩放默认是以左上角为缩放的参照点，transform:scale缩放默认是相对于中心点的缩放，故应该将transform:scale缩放的参照点设为左上角，与zoom保持一致。

13、进一步的，通过transform将图形报表还原回原本的位置和视觉大小，解决zoom缩放带来的热区偏移问题。

14、本发明的一种解决图形报表热区偏移的方法及系统和现有技术相比，具有以下突出的有益效果：

15、本发明当图形报表处于zoom缩放页面之中时不会产生热区偏移的问题。

技术特征：

1.一种解决图形报表热区偏移的方法，其特征在于，首先进行zoom缩放局部还原，热区位置也随之恢复正常，将热区恢复之后，图形报表位置、占据空间发生改变，会改变整个页面的布局。

2.根据权利要求1所述的一种解决图形报表热区偏移的方法，其特征在于，进行zoom缩放局部还原，通过dom为图形报表的容器还原缩放，使整个容器内的图形报表准确地还原到缩放之前的位置，热区位置也随之恢复正常。

3.根据权利要求2所述的一种解决图形报表热区偏移的方法，其特征在于，想要再恢复布局，则应用transform:scale缩放的方式，将图形报表的容器再还原回之前的位置，因transform:scale不改变缩放元素的真实大小和位置，视觉效果的呈现上则不会存在热区偏移的情况。

4.根据权利要求3所述的一种解决图形报表热区偏移的方法，其特征在于，zoom缩放默认是以左上角为缩放的参照点，transform:scale缩放默认是相对于中心点的缩放，故应该将transform:scale缩放的参照点设为左上角，与zoom保持一致。

5.根据权利要求4所述的一种解决图形报表热区偏移的方法，其特征在于，通过transform将图形报表还原回原本的位置和视觉大小，解决zoom缩放带来的热区偏移问题。

6.一种解决图形报表热区偏移的系统，其特征在于，首先进行zoom缩放局部还原，热区位置也随之恢复正常，将热区恢复之后，图形报表位置、占据空间发生改变，会改变整个页面的布局。

7.根据权利要求6所述的一种解决图形报表热区偏移的系统，其特征在于，进行zoom缩放局部还原，通过dom为图形报表的容器还原缩放，使整个容器内的图形报表准确地还原到缩放之前的位置，热区位置也随之恢复正常。

8.根据权利要求7所述的一种解决图形报表热区偏移的系统，其特征在于，想要再恢复布局，则应用transform:scale缩放的方式，将图形报表的容器再还原回之前的位置，因transform:scale不改变缩放元素的真实大小和位置，视觉效果的呈现上则不会存在热区偏移的情况。

9.根据权利要求8所述的一种解决图形报表热区偏移的系统，其特征在于，zoom缩放默认是以左上角为缩放的参照点，transform:scale缩放默认是相对于中心点的缩放，故应该将transform:scale缩放的参照点设为左上角，与zoom保持一致。

10.根据权利要求9所述的一种解决图形报表热区偏移的系统，其特征在于，通过transform将图形报表还原回原本的位置和视觉大小，解决zoom缩放带来的热区偏移问题。

技术总结
本发明涉及javaScript领域，具体提供了一种解决图形报表热区偏移的方法及系统，首先进行zoom缩放局部还原，热区位置也随之恢复正常，将热区恢复之后，图形报表位置、占据空间发生改变，会改变整个页面的布局。与现有技术相比，本发明当图形报表处于zoom缩放页面之中时不会产生热区偏移的问题。

技术研发人员：王胜举,林大伟
受保护的技术使用者：山东浪潮数字商业科技有限公司
技术研发日：
技术公布日：2024/1/25