v15 vue3 设置图表宽高放大缩小

登录

本帖最后由 Ellia.Duan 于 2022-10-14 09:28 编辑

动态设置图表的宽高，缩小可以，放大失效（超过原始width后，只会是默认width），这种情况怎么处理？只能重新add图表么？

Ellia.Duan · Ellia.Duan

本帖最后由 Ellia.Duan 于 2022-10-11 15:03 编辑

请问这里scale是指缩放比例吗？

正常来说，图表是可以正常缩放的，您这边是重写的它的缩放代码？
这里为什么要对chart.x()重新布局呢？

您这边动态设置图表宽高，传入一个缩放比例scale。此时设置chart.height()和width()即可，为什么对chart.x（）也进行了设置值呢？

eyAndrew · eyAndrew

我们是在首页展示图表，图表不能拖拽，还要支持响应式，所以需要动态计算当前展示区域的宽高，然后等比去处理 chart是的宽， x轴不等比缩放，可能会有超出的情况啊。不支持对x轴设置么？我们是以0,0为原点，根据比例，重新计算 chart的宽和 left的距离

Ellia.Duan · Ellia.Duan

eyAndrew 发表于 2022-10-11 15:32
我们是在首页展示图表，图表不能拖拽，还要支持响应式，所以需要动态计算当前展示区域的宽高，然后等比 ...

您这边需求了解，您是否可以提供下您这边的demo，这边在您的响应式demo基础上设置图表宽高

eyAndrew · eyAndrew

暂时没办法提供demo，想问下我这个思路有问题么？你们可以测试下官网的demo，通过代码修改chart的宽度， left

Ellia.Duan · Ellia.Duan

响应式页面，页面大小发生改变后，您这边是在Spread 的哪个事件中去修改了图表大小。

eyAndrew · eyAndrew

如图所示，我是监听SheetTabClick的事件，然后获取所有的charts对象，根据比例获取最新width和 left，这样可以么？

eyAndrew · eyAndrew

这是设置chart的代码

Ellia.Duan · Ellia.Duan

eyAndrew 发表于 2022-10-11 18:33
这是设置chart的代码

我感觉放大失效的问题在于，缩小之后您这边获取的chart.width()是缩小后的尺寸，不是原尺寸，所以这边需要存储一个原始的chart尺寸，然后scale变化之后，以原始尺寸×scale就可以得到正确的结果。
我这边不确定您这边的scale计算规则，我写了一个input框输入scale。
可以得到这样子的结果，您看下是不是您想要的
scale分别是0.5，1，1.5

关键代码是

eyAndrew · eyAndrew

感谢回复，应该是sheet的宽限制了，我给定sheet的宽高，当放大chart width的时候，上限也就是 sheet的宽度吧？不会自动扩大sheet的区域范围

		自动登录	找回密码
密码			立即注册

[已处理] v15 vue3 设置图表宽高放大缩小

本帖子中包含更多资源

29 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

SpreadJS认证

SpreadJS高级认证

[已处理] v15 vue3 设置图表宽高 放大缩小

本帖子中包含更多资源

29 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

SpreadJS认证

SpreadJS高级认证

[已处理] v15 vue3 设置图表宽高放大缩小