【技术实现步骤摘要】
本专利技术涉及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所述的一种解决图形
6.一种解决图形报表热区偏移的系统，其特征在于，首先进行zoom缩放局部还原，热区位置也随之恢复正常，将热区恢复之后，图形报表位置、占据空间发生改变，会改变整个页面的布局。
7.根据权利要求6所述的一种解决图形报表热区偏移的系统，其特征在于，进行zoom缩放局部还原，通过dom为图形报表的容器还原缩放，使整个容器内的图形报表准确地还原到缩放之前的位置，热区位置也随之恢复正常。
8.根据权利要求7所述的一种解决图形报表热区偏移的系统，其特征在于，想要再恢复布局，则应用transform:scale缩放的方式，将图形报表的容器再还原回之前的位置，因transform:scale不改变缩放元素的真实大小和位置，视觉效果的呈现上则不会存在热区偏移的情况。
9.根据权利要求8所述的一种解决图形报表热区偏移的系统，其特征在于，zoom缩放默认是以左上角为缩放的参照点，transform:scale缩放默认是相对于中心点的缩放，故应该将transform:scale缩放的参照点设为左上角，与zoom保持一致。
10.根据权利要求9所述的一种解决图形报表热区偏移的系统，其特征在于，通过transform将图形报表还原回原本的位置和视觉大小，解决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缩放带来的热区偏移问题。
...【专利技术属性】
技术研发人员：王胜举，林大伟，
申请(专利权)人：山东浪潮数字商业科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。