28

<canvas>や SVGなどのブラウザー内グラフィック レンダリング機能を使用してヒートマップを作成できる JavaScript ライブラリはありますか?

HeatMapAPI.com については知っていますが、ヒート マップはサーバー側で生成されます。エレメントの時代には<canvas>もう必要ないと思います!

このようなツールがまだない場合、そのようなツールの作成に参加するボランティアはいますか?

4

6 に答える 6

40

<canvas>要素と JavaScriptを使用したリアルタイム ヒートマップを含むデモを作成しました。また、ヒートマップ サンプルの横に文書化されたコードを追加しました。ヒートマップ生成プロセスは、ユーザーのマウスの動きに依存するキャンバス要素のアルファ マップに基づいています。ここで私のデモを見ることができます: http://www.patrick-wied.at/static/heatmap/

于 2010-09-11T21:01:09.643 に答える
4

Google Visualization API [ http://code.google.com/apis/visualization/documentation/]を使用してヒット マップを作成しました。SVG と VML を使用し、クロス ブラウザとの互換性もあります。それが役立つことを願っています。

于 2009-08-01T09:14:13.777 に答える
2

私も試してみましたが、ガウス平滑化を行わずに、キャンバスに任せました。基本的に、グレー スケールのすべてのポイントに放射状グラデーションを描画し、このグレー スケール イメージに色を付けます (詳細な説明については、「.NET 2.0 (C#) を使用したヒート マップの作成」を参照してください。私の実装は少し異なります)。

結果は次のようになります。

JavaScript と Canvas を使用したヒート マップ
(ソース: bitbucket.org )

Chrome/Chromium でのレンダリング時間はそれほど悪くありません。すべてのピクセルをループしているため、最も時間がかかるのは色付けだと思います。

ここでコードを見つけることができます: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js

于 2010-07-08T09:06:57.433 に答える
2

ここにはいくつかの js/canvas/web ワーカー コードがありますが、それを使用して実行できる作業はたくさんあります。また、http://heatmapthing.heroku.com/でオンラインにプッシュされています。これには、ブラウザが Web ワーカーをサポートしている必要があります。

改善する場合はプルリクエストを送ってください。疑似ガウス平滑化は、今のところ地獄のように遅いです。

于 2010-06-10T08:04:47.317 に答える
1

数年前にヒートマップで遊んだ。http://www.urbigene.com/treemapphp/を参照してください。アルゴリズムはここから来ました: http://www.cs.umd.edu/hcil/treemap-history/

于 2009-07-12T22:08:34.180 に答える
0

Heatcanvas はかなり良さそうです。また、openstreetmaps https://github.com/sunng87/heatcanvasの上で実行するためのリーフレット拡張機能もあり ます。

少数のポイント (< 200) 程度では問題なく動作しますが、何千ものポイントでは少し遅くなります。また、パンとズームの後に必要以上に頻繁に再計算される可能性があると思います。また、その場でヒートマップを変更する (javascript を使用してヒートマップを別のヒートマップに置き換える) ことに問題がありました。もう少し実験する必要があると思います。または、著者

于 2012-11-01T21:09:06.367 に答える