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

Question

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

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

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

Answer 1

我创建了一个演示，其中包含带有<canvas>元素和javascript的实时热图。我还在热图样本旁边添加了文档代码。热图生成过程基于canvas元素中的alpha映射，该映射取决于用户的鼠标移动。 您可以在这里查看我的演示： http://www.patrick-wied.at/static/heatmap/

Answer 2

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

Answer 3

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

如果您改进了拉请求，请发送拉请求。现在，伪高斯平滑现在已经很好了。

Answer 4

我也尝试了一下，但是没有高斯平滑我的自我，我让画布为我做这件事。基本上我为灰度的每个点绘制一个径向渐变，然后着色这个灰度图像（详见"Creating Heat Maps with .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看起来很不错。它还有一个小册子扩展，可以在openstreetmaps的顶部运行 https://github.com/sunng87/heatcanvas

它在几个点（<200）左右运行得很好，但在数千个点上变得有点慢。我认为在平移和缩放之后它可能也会经常重新计算，并且我在运行中更改热图时遇到了一些问题（使用javascript替换另一个热图），我想我需要再尝试一下，或者联系作者