javascript - 使用创建热图

Question

是否有任何 JavaScript 库允许您使用浏览器内的图形渲染功能（如<canvas>SVG 或 SVG）创建热图？

我知道 HeatMapAPI.com，但它们的热图是在服务器端生成的。我认为在<canvas>元素时代我们不再需要它了！

如果还没有这样的东西，是否有志愿者参与创建这样的工具？

score 40 · Accepted Answer

<canvas>我创建了一个演示，包括带有元素和 javascript的实时热图。我还在热图示例旁边添加了记录的代码。热图生成过程基于画布元素中的阿尔法图，该图取决于用户的鼠标移动。您可以在这里查看我的演示：http: //www.patrick-wied.at/static/heatmap/

score 4 · Accepted Answer

我在 Google Visualization API [ http://code.google.com/apis/visualization/documentation/]的帮助下创建了一个命中地图。它使用 SVG 和 VML，并且还兼容跨浏览器。希望它会有所帮助。

score 2 · Accepted Answer

我在这里有一些 js/canvas/web worker 代码，尽管可以用它完成很多工作。它还在http://heatmapthing.heroku.com/上在线推送。您的浏览器需要为此支持网络工作者。

如果您改进它，请发送拉取请求。伪高斯平滑现在快得要命了。

score 2 · Accepted Answer

我也试了一下，但没有做高斯平滑我自己，我让画布为我做。基本上，我为灰度中的每个点绘制径向渐变，然后为这个灰度图像着色（有关详细说明，请参阅“使用 .NET 2.0 (C#) 创建热图”，我的实现有点不同）。

结果如下所示：

_{（来源：bitbucket.org）}

Chrome/Chromium 的渲染时间还不错。我认为最耗时的部分是着色，因为我在每个像素上循环。

score 1 · Accepted Answer

score 0 · Accepted Answer

它在几个点（< 200）左右运行得很好，但在数千个点上运行有点慢。我认为它也可能在平移和缩放之后更频繁地重新计算，并且我在动态更改热图（使用 javascript 将热图替换为另一个热图）时遇到了一些问题，我想我需要对它进行更多试验，或者联系作者

javascript - 使用创建热图元素？