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

Posted 2023-02-18

【中文标题】使用 <canvas> 元素创建热图？

【英文标题】：Creating heatmaps using <canvas> element?

【发布时间】：2010-11-10 03:55:53

【问题描述】：

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

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

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

【问题讨论】：

IE 8 及以下版本不支持画布。

是的，但是感谢 Explorer Canvas (ExCanvas)，IE 对 Canvas 标签有部分支持

没错，但这是一种快速修复的耳光。

好吧，你总是可以将老式的服务器端生成的热图提供给无法使用的浏览器（翻录 IE7 及以下版本，我指的是手机等）

您可以随时将 Adob​​e SVG 查看器插件添加到 IE 中查看

【参考方案1】：

我也尝试过，但没有对自己进行高斯平滑，我让 canvas 为我做这件事。基本上我为灰度中的每个点绘制一个径向渐变，然后为这个灰度图像着色（有关详细说明，请参阅"Creating Heat Maps with .NET 2.0 (C#)"，我的实现有点不同）。

结果如下：

_{（来源：bitbucket.org）}

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

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

【参考方案2】：

Heatcanvas 看起来相当不错。它还有一个传单扩展，可以在 openstreetmaps 之上运行 https://github.com/sunng87/heatcanvas

它在几个点（

【参考方案3】：

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

【讨论】：

感谢演示，非常有用 +1

嘿帕特里克。是否可以更新 heatmap.js 以在单独的线程中工作（使用 web-workers），所以如果要绘制大量数据，您只需告诉工作人员计算屏幕外画布并将画布发送给您完成了吗？

嘿克里斯蒂。不幸的是，由于与 canvas 元素的紧密耦合和 web worker 不支持 canvas，这是不可能的。如果您正在寻找显示更多数据点，我有个好消息：我目前正在研究 heatmap.js v2 并进行了一些重大的性能优化。在 v2 中，您可以可视化至少 20k 数据点，而不会注意到任何性能损失

heatmap.js 的源代码在 GitHub 上提供：github.com/pa7/heatmap.js（MIT 许可证）

【参考方案4】：

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

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

【参考方案5】：

我在 Google Visualization API [http://code.google.com/apis/visualization/documentation/].它使用 SVG 和 VML，并且还兼容跨浏览器。希望对您有所帮助。

【讨论】：

您能分享一下您使用的可视化工具吗？我在可视化库中看不到热图 (code.google.com/apis/visualization/documentation/gallery.html) 我想做的是在 Google 地图上放置热图。我知道我可以使用这个：code.google.com/p/gheat，但 GHeat 不使用 （它使用的是服务器端生成的 pngs）。

【参考方案6】：

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

【讨论】：

他说的是热图，而不是树图 :)

hopps :-) 在我看来是一样的 :-)