使用comboBox渲染下拉数据后根据切换的数据过滤图表源数据后渲染时间过长

收藏

本帖最后由 Richard.Huang 于 2024-2-28 12:17 编辑

产品：SpreadJS

使用comboBox渲染下拉数据后根据切换的数据过滤图表源数据，将源数据存放于状态机中，但是由于图标样式及数据过多，初始化加载比较耗时，但当状态机中的数据发生变化，涉及该数据的图表似乎会重新绘制，导致页面卡顿，似乎在图标重新渲染数据后才会收起下拉框和切换下拉框显示数据。请问这种情况应该怎么处理呢？

Richard.Huang · Richard.Huang

您好，请问您的意思是，制作了一个ComboBox类型的单元格，用户通过下拉框的点击来动态的对您页面上“数据绑定区域”的数据进行动态加载是吗？

而您目前面临着相关性能问题。从您的描述中，我不太理解“将源数据存放于状态机中”的这个“状态机”指的是什么，和SpreadJS有什么联系呢，其次，您所说的数据发生变化时，页面中的数据也会重新绘制导致卡顿，请问您的数据量是多大呢？能否提供一份可供我们复现的demo方便我们针对您的demo来给您提供一个合理的优化方案

换日线 · 换日线

Richard.Huang 发表于 2024-1-31 16:22
您好，请问您的意思是，制作了一个ComboBox类型的单元格，用户通过下拉框的点击来动态的对您页面上“数据绑 ...

是这样的，图表的数据源我存放于react的state中，然后通过ComboBox下拉框的changed后的值去处理图表的数据，然后再次保存于state中进行渲染，这样加载渲染会很慢，甚至combobox的下拉框会等到渲染完成后才隐藏，目前数据量也没有多少，现在是两三百条，但是后续数据量可能会更大，但是数据demo目前可能提供不了、

Richard.Huang · Richard.Huang

换日线发表于 2024-1-31 16:36
是这样的，图表的数据源我存放于react的state中，然后通过ComboBox下拉框的changed后的值去处理图表的数 ...

抱歉您无法提供demo，我只能凭借自己猜测去复现您优化您的性能，如果是大数据量且用setDataSource进行绑定渲染都无法满足您的需求，那么只能考虑从渲染策略上来进行优化，优化之前您还可以尝试在setDataSource方法前后加上sheet.suspendPaint()和sheet.resumePaint()。看是否能够提升您的性能，如果无法提升性能，您可以参考附件中滚动加载的策略来尝试优化您的性能

Joestar.Xu · Joestar.Xu

您好，由于本帖较长时间没有回复，本帖先做结贴处理了，后续如您有其他问题，欢迎您开新帖提问。

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

[已处理] 使用comboBox渲染下拉数据后根据切换的数据过滤图表源数据后渲染时间过长

4 个回复

SpreadJS 认证

SpreadJS 高级认证