使用 <canvas> 元素创建热图？

Question

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

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

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

Answer 1

我创建包括与<canvas>元件和javascript实时热图的演示。我还添加了旁边的热图的示例代码文件。热图生成处理是基于在其依赖于用户的鼠标移动的画布元件的α地图上。 你可以看看我的演示就在这里： http://www.patrick-wied.at/static/heatmap/

Answer 2

我创建了一个打击映射与谷歌可视化API的帮助[的http：// code.google.com/apis/visualization/documentation/] 。它使用SVG和VML，也跨浏览器兼容。希望能对大家有所帮助。

Answer 3

我有一些JS /月/网络工作者代码这里虽然有大量的工作，可能是用它做。它也是在 http://heatmapthing.heroku.com/ 在线推。您的浏览器需要支持网络工作者这一点。

请发送引入请求，如果你改善。伪高斯平滑slooooooooow地狱现在。

Answer 4

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

结果如下：

Chrome/Chromium 上的渲染时间并没有那么糟糕。我认为最耗时的部分是着色，因为我要循环每个像素。

您可以在这里找到代码： http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js

Answer 5

几年前我玩过热图。看 http://www.urbigene.com/treemapphp/, ，算法来自这里： http://www.cs.umd.edu/hcil/treemap-history/

Answer 6

Heatcanvas看起来相当不错。它也有一个小叶扩展到开放街道地图上运行 https://github.com/sunng87/heatcanvas

它运行得很好的几个点（<200）左右，但得到许多千点的速度有点慢。我想这也可能平移和缩放后重新计算往往比必要的，而且我有一些问题与不断变化的热图上飞（与另一人使用JavaScript替换热图），你猜我需要尝试多一点的，或者联系作者