2009-07-12 18 views
26

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

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

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

+0

IE 8以下ではキャンバスをサポートしていません。 –

+1

はい、Explorer Canvas(ExCanvas)のおかげで、IEはキャンバスタグ –

+0

を部分的にサポートしていますが、これは一緒にすばやく修正されたものです。 –

答えて

40

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

+0

そのデモをありがとう、非常に便利です+1 –

+0

ヘイパトリック。 heatmap.jsを別のスレッドで(Webワーカーを使用して)作業するように更新することは可能ですか?描画するデータがたくさんある場合は、ワーカーにオフスクリーンキャンバスを計算し、キャンバスを送信します完了しました? – Cristy

+0

ちょっとクリスティ。残念ながらキャンバス要素との緊密な結合のため不可能であり、Webワーカーはキャンバスをサポートしていません。より多くのデータポイントを表示したい場合は、良いニュースがあります:現在、heatmap.js v2で作業していて、パフォーマンスの最適化を行っています。 v2では、パフォーマンスの低下に気づかずに少なくとも20kのデータポイントを視覚化することができます –

4

私はGoogle視覚化API [http://code.google.com/apis/visualization/documentation/]の助けを借りてヒットマップを作成しました。 SVG & VMLを使用し、クロスブラウザーと互換性があります。それが助けてくれることを願って。

+2

あなたはどのような視覚化を使ったのですか?ビジュアライゼーションギャラリー(http://code.google.com/apis/visualization/documentation/gallery.html)でヒートマップが表示されない Googleマップにヒートマップを配置したいと思っています。私はこれを使用することができることを知っています:http://code.google.com/p/gheat/しかし、GHeatはを使用していません(代わりにサーバー側でpngを生成しています)。 – warpech

2

それを行うことができる作業の多くがありますけれども、私はいくつかのJS /キャンバス/ウェブワーカーコードhereを持っています。また、オンラインでhttp://heatmapthing.heroku.com/にプッシュされています。あなたのブラウザは、Webワーカーをサポートする必要があります。

あなたはそれが改善される場合、プルリクエストを送信してください。疑似ガウス平滑化は今のところ地獄のようにslooooooooowです。

2

また、私はそれを試して与えたが、私の自己を平滑化ガウスを行わず、私はキャンバスが私のためにそれをやらせます。基本的には、グレースケールのすべての点に対して放射状のグラデーションを描画し、このグレースケール画像をカラー化します(詳細は"Creating Heat Maps with .NET 2.0 (C#)"を参照してください)。

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

Heat Map with JavaScript and Canvas

レンダリング時間は、クロム/クロム上の不良ではありません。私はすべてのピクセルをループしているので、最も時間のかかる部分はカラーリングだと思います。

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

0

ヒートキャンバスはかなりいいですね。また、オープンストリートマップ https://github.com/sunng87/heatcanvas

の上で実行するためにリーフレットの拡張子を持っていることは、いくつかのポイント(< 200)かそこらで非常によく動作しますが、ポイントの何千に少し遅くなります。パンとズームの後で必要以上に頻繁に再計算するかもしれないと思っています。ヒートマップを変更してヒートマップを変更する(JavaScriptを使用してヒートマップを別のものに置き換える)にいくつかの問題がありました。作者

関連する問題