使用
是否有任何 JavaScript 库允许您使用浏览器内图形渲染功能（例如 或 SVG）创建热图？
我知道 HeatMapAPI.com，但他们的热图是在服务器端生成的。 我认为在 元素时代我们不再需要它了！
如果还没有这样的东西，是否有志愿者参与创建这样的工具？
Are there any JavaScript libraries out there that allow you to create heatmaps using in-browser graphic rendering features such as <canvas> or SVG?
I know about HeatMapAPI.com, but their heat maps are generated on the server side. I think that in the era of <canvas> element we don't need that anymore!
If there is nothing like this yet, are there any volunteers to participate in creating such a tool?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我在 Google Visualization API [http://code.google 的帮助下创建了一个点击地图.com/apis/visualization/documentation/]。 它使用 SVG 和 VML，并且还跨浏览器兼容。 希望它会有所帮助。
I created a hit map with the help of Google Visualization API [http://code.google.com/apis/visualization/documentation/]. It uses SVG & VML, and also cross browser compatible. Hope it'll help.
我有一些 js/canvas/web worker 代码这里，尽管可以用它完成很多工作。 它还在 http://heatmapthing.heroku.com/ 上在线推送。 您的浏览器需要为此支持网络工作者。
如果您对其进行改进，请发送拉取请求。 伪高斯平滑现在太慢了。
I have some js/canvas/web worker code here though there's plenty of work that could be done with it. It's also pushed online at http://heatmapthing.heroku.com/. Your browser needs to support web workers for this.
Please send pull requests if you improve it. The pseudo-gaussian smoothing is slooooooooow as hell right now.
我也尝试过，但没有对自己进行高斯平滑，而是让画布为我做这件事。 基本上，我为灰度中的每个点绘制径向渐变，然后对该灰度图像进行着色（请参阅 "使用 .NET 创建热图NET 2.0 (C#)” 获取详细说明，我的实现略有不同）。
结果如下所示：
（来源：bitbucket.org)
在 Chrome/Chromium 上渲染时间还不错。 我认为最耗时的部分是着色，因为我要循环每个像素。
您可以在这里找到代码： http ://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js
I also gave it a try, but without doing the Gaussian smoothing my self, I let canvas do that for me. Basically I draw a radial gradient for every point in gray scale and then colorize this gray scale image (see "Creating Heat Maps with .NET 2.0 (C#)" for a detailed explanation, my implementation differs a bit).
The result looks like this:
(source: bitbucket.org)
The rendering time isn't that bad on Chrome/Chromium. I think the most time consuming part is the colorizing, because I am looping over every pixel.
You can find the code here: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js
几年前我玩过热图。 参见http://www.urbigene.com/treemapphp/，算法来自这里：< a href="http://www.cs.umd.edu/hcil/treemap-history/" rel="nofollow noreferrer">http://www.cs.umd.edu/hcil/treemap-history/
I played with heatmap a few years ago. See http://www.urbigene.com/treemapphp/, the algorithm came from here: http://www.cs.umd.edu/hcil/treemap-history/
Heatcanvas 看起来相当不错。 它还具有可在 openstreetmaps 之上运行的传单扩展
https://github.com/sunng87/heatcanvas
它在几个点上运行得很好（<200）左右，但在数千个点上有点慢。 我认为在平移和缩放之后，它也可能会比必要的情况更频繁地重新计算，并且我在动态更改热图时遇到了一些问题（使用 JavaScript 将热图替换为另一个热图），我猜我需要对其进行更多实验，或者联系作者
Heatcanvas looks quite good. It also has a leaflet extension to run on top of openstreetmaps
https://github.com/sunng87/heatcanvas
It runs quite well on few points (< 200) or so, but gets a bit slow on many thousands of points. I think it might also recalculate more often than necessary after pan and zoom, and I had some problems with changing the heatmap on the fly (replacing heatmap with another using javascript), guess I need to experiment a bit more with it, or contact the author
我创建了一个演示，其中包含带有
元素和 JavaScript 的实时热图。 我还在热图示例旁边添加了记录的代码。 热图生成过程基于画布元素中的 alpha 贴图，该贴图取决于用户的鼠标移动。您可以在这里查看我的演示：
http://www.patrick-wied.at/static/heatmap/
I created a demo including a real-time heatmap with the
<canvas>element and javascript. I also added the documented code next to the heatmap sample. The heatmap generation process is based on an alpha map in the canvas element which depends on the users mouse movement.You can take a look at my demo right here:
http://www.patrick-wied.at/static/heatmap/