Question

想实现类似animatorVector那样的动画回放效果，发现不支持，于是
我目前使用的方法是：使用定时器每隔几秒读取数据在前端绘制热力图，实现热力图回放，但是效果非常不好，有很严重的卡顿。

我查看了发现主要是前端绘制的问题，后台数据量并不大。

请教大神如何实现这个平滑回放的效果？

Answer 1

你好，请问你所有数据进行绘制热力图的时候大概需要多久？

你说你的数据量不大，那么具体是多少呢？

以及你读取数据的时候又需要多久呢？

你间隔的时候是不是太短了，然后读取数据这边才读取到就立马进行绘制呢？

这些都要考虑到其中，你可以参考我们范例，范例里面一次性绘制2000个也是还算快的

Comments

所有数据进行绘制热力图的时候大概需要2~3秒的时间，数据量只有1979，但修改了数据库查询语句把数据量限制在50的时候，绘制也需要2~3秒。读取数据没有问题，数据都是以很快的速度读取出来，基本都在一秒之内就能完成。至于您所说的间隔的时候我不是很理解，我的程序的确是读取到了数据之后就立马进行绘制，请问是我缺少了什么必要的步骤吗？

---

你间隔读取数据是几秒呢？我的意思是间隔读取数据的时间是不是太快了。比如，你读取数据要1s，绘制要3s，但是你设置间隔读取数据的时候又低于4s，也就是你前一个还没有绘制完成就又开始读取数据进行下一次的绘制，这样子是否就会造成卡顿呢？

---

我看了一下不存在您说的这个问题，我之前在页面上设置了一个钟表模块，通过控制分针的速度来达到控制读取间隔的效果，我设置的读取间隔是十秒，即0.1h/s，而在昨天的运行中我发现绘制的卡顿时长好像是呈指数增长的，因为我的数据库中只有16时~24时的数据，在第一次读取16时的数据并绘制的时候只会微微的卡一下，而在十秒过后绘制17时的数据时，据我对钟表模块的观察，它的卡顿时长会比16时多一倍（卡顿时钟表模块分针、时针皆不动，直到热力图绘出后直接显示成功绘制的时间点），而18时会比17时再严重一倍，在19~24时的时候就会完全卡顿，可以猜想应该是因为卡顿时长在继续增长，而最奇怪的是，当时间超过了24时，进入到0~15这个没有数据的时间段内，卡顿也并不会因此消失。我并不清楚是什么原因引起了这样的问题，请问您有什么看法吗？