antvis/G2

Do you want to work on this issue?

You can request for a bounty in order to promote it!

V5中进行简单散点图绘制时,数据量超过5K就会感知到明显的性能下滑 #5920

Xiatian-leo posted onGitHub

问题描述

如题,在1K及以下时,无明显问题;5W以上直接崩溃,复现代码如下:(可以拷贝至任意官方demo复现)

import { Chart } from '@antv/g2';

const Size = 100; // 100 / 1000 / 10000

function generatePointData(size) {
  return new Array(size).fill(void 0).map((item, idx) => ({
    x: idx,
    y: Math.round(Math.random() * 1000)
  }))
}

const chart = new Chart({
  container: 'container',
  autoFit: true,
});
chart
  .data(generatePointData(Size))
  .point()
  .encode('x', 'x')
  .encode('y', 'y')
chart.render()

重现步骤

切换Size,改变数据量

预期行为

期望性能能和V4无差(至少不能出现大的下滑),或者可以通过关闭某些feat获取性能提升;

平台

  • 操作系统: [Windows 11]
  • 网页浏览器: [Microsoft Edge]

这是一个很好的 issue,我们近期会优化优化。

posted by pearmini over 1 year ago
posted by xiaoiver over 1 year ago

这是一个很好的 issue,我们近期会优化优化。

我可以关闭什么V5的配置以提升性能吗?这个影响我接下来功能的选型了...谢谢

posted by LeonardoHsia over 1 year ago

目前没有相关的配置,如果项目比较着急,同时对性能要求较高,可以先使用 v4 版本。

posted by pearmini over 1 year ago

是这样的啊,之前功能中是用的V4,为什么最近在调研V5呢,是因为最近的需求涉及到《马赛克》图这种横轴不均匀的类型,查找一圈,没能在V4中找到方案...如果我通过V4实现的话,请问您有什么建议吗?

posted by LeonardoHsia over 1 year ago

如果用 v4 的话可以自己去计算布局,然后用 rect geometry 绘制。横轴可以通过 point geometry + 自定义 text shape 去实现。

posted by pearmini over 1 year ago

@LeonardoHsia 或者说你们新的需求大概多久需要交付?

posted by pearmini over 1 year ago

这月底交付 😂

posted by LeonardoHsia over 1 year ago

如果用 v4 的话可以自己去计算布局,然后用 rect geometry 绘制。横轴可以通过 point geometry + 自定义 text shape 去实现。

非常感谢!我尝试下这个思路

posted by LeonardoHsia over 1 year ago

如果用 v4 的话可以自己去计算布局,然后用 rect geometry 绘制。横轴可以通过 point geometry + 自定义 text shape 去实现。

非常感谢!我尝试下这个思路

我看了下是因为动画导致的,可以先关闭动画:

chart.animate(false);

例子:https://codesandbox.io/p/sandbox/g2-v5-scatter-wmxpf8?file=%2Findex.js%3A10%2C2

可以看到很大一部分时间都花在了创建 transition 上,相比之下渲染时间反而不多: <img width="461" alt="截屏2023-12-12 下午4 20 58" src="https://github.com/antvis/G2/assets/3608471/9a72bd3a-3cee-46b1-b877-af7ad34085fe">

不过这里确实是一个可以优化的点,50k 个圆点执行的动画其实是同一个,如果每一个都创建一个 Animation 对象(背后都对应一个定时器)确实是很大的性能开销。 G2 V4 版本似乎会在一定数据量下自动关闭进场动画,我再研究一下。

posted by xiaoiver over 1 year ago

谢大佬救我狗命!!🐶🐶🐶 在本地单元测试中也得到了验证

posted by LeonardoHsia over 1 year ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests