Erstellen von Heatmaps mit <canvas> Element?

Gibt es JavaScript-Bibliotheken, mit denen Sie Heatmaps mithilfe von grafischen Darstellungsfunktionen im Browser wie <canvas> oder SVG erstellen können?Erstellen von Heatmaps mit <canvas> Element?

Ich weiß über HeatMapAPI.com, aber ihre Heat-Maps werden auf der Serverseite generiert. Ich denke, dass in der Ära von <canvas> Element wir das nicht mehr brauchen!

Wenn es so etwas noch nicht gibt, gibt es Freiwillige, die sich an der Erstellung eines solchen Tools beteiligen?

Quelle

2009-07-12 warpech

IE 8 und darunter haben keine Canvas-Unterstützung. –

Ja, aber dank Explorer Canvas (ExCanvas), IE hat eine partielle Unterstützung für das Canvas-Tag –

True, aber das ist eine Art von slapp zusammen schnelle Lösung. –

ich mit dem <canvas> Element und Javascript eine Demo, die eine Echtzeit-Heatmap erstellt. Ich habe auch den dokumentierten Code neben dem Heatmap-Beispiel hinzugefügt. Der Heatmap-Generierungsprozess basiert auf einer Alpha-Map im Canvas-Element, die von der Mausbewegung des Benutzers abhängt. Sie können sich meine Demo hier ansehen: http://www.patrick-wied.at/static/heatmap/

Quelle

2010-09-11 21:01:09

Danke für diese Demo, sehr nützlich +1 –

Hey Patrick. Ist es möglich, heatmap.js zu aktualisieren, um in einem separaten Thread zu arbeiten (mit Web-Arbeitern), wenn Sie also viele Daten zu zeichnen haben, sagen Sie dem Arbeiter nur, dass er eine Leinwand außerhalb des Bildschirms berechnet und Ihnen die Leinwand sendet es ist fertig? – Cristy

Hallo Cristy. Leider ist dies aufgrund der engen Kopplung mit dem Canvas-Element nicht möglich, und Web-Worker unterstützen keine Canvas. Wenn Sie nach mehr Datenpunkten suchen, habe ich gute Nachrichten: Ich arbeite gerade an heatmap.js v2 und habe einige wichtige Leistungsoptimierungen durchgeführt. in v2 können Sie mindestens 20k Datenpunkte visualisieren, ohne einen Leistungsverlust zu bemerken –

Ich spielte vor ein paar Jahren mit Heatmap. Siehe http://www.urbigene.com/treemapphp/, der Algorithmus kam von hier: http://www.cs.umd.edu/hcil/treemap-history/

Quelle

2009-07-12 22:08:34 Pierre

Er spricht über Heatmaps und nicht über Treemaps :) –

hopps :-) sieht für mich genauso aus :-) – Pierre

Ich habe eine Hitmap mit Hilfe von Google Visualization API erstellt [http://code.google.com/apis/visualization/documentation/]. Es verwendet SVG & VML, und auch Cross-Browser-kompatibel. Ich hoffe, es wird dir helfen.

Quelle

2009-08-01 09:14:13 Rifat

kannst du teilen welche Visualisierung du benutzt hast? Ich sehe keine Heatmaps in der Visualisierungsgalerie (http://code.google.com/apis/visualization/documentation/gallery.html) Was ich tun möchte, ist eine Heatmap über Google Maps zu platzieren. Ich weiß, dass ich das verwenden könnte: http://code.google.com/p/gheat/, aber GHeat verwendet

Ich habe einige js/canvas/web worker Code here obwohl es viel Arbeit gibt, die damit erledigt werden könnte. Es ist auch online unter http://heatmapthing.heroku.com/ geschoben. Ihr Browser muss dafür Web-Mitarbeiter unterstützen.

Bitte senden Sie Pull-Anforderungen, wenn Sie es verbessern. Die pseudo-gaußsche Glättung ist zur Zeit verdammt häßlich.

Quelle

2010-06-10 08:04:47 x1a4

Ich habe es auch versucht, aber ohne die Gaußsche Glättung meines Selbst zu machen, lasse ich die Leinwand für mich machen. Grundsätzlich zeichne ich für jeden Punkt in Graustufen einen radialen Farbverlauf und koloriere dann dieses Graustufenbild (siehe "Creating Heat Maps with .NET 2.0 (C#)" für eine detaillierte Erklärung, meine Implementierung unterscheidet sich ein wenig).

Das Ergebnis sieht wie folgt aus:

Heat Map with JavaScript and Canvas

Die Renderzeit auf Chrome/Chromium ist nicht so schlimm. Ich denke, der zeitaufwendigste Teil ist die Kolorierung, weil ich jedes Pixel überstreiche.

Sie können den Code finden Sie hier: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js

Quelle

2010-07-08 09:06:57 tsauerwein

Heatcanvas sieht ziemlich gut aus. Es hat auch eine Broschüre Verlängerung oben auf OpenStreetMap https://github.com/sunng87/heatcanvas

Es läuft ganz gut auf wenige Punkte (< 200) oder so laufen, aber wird es ein wenig langsam auf viele Tausende von Punkten. Ich denke, dass es auch nach dem Schwenken und Zoomen öfter neu berechnet werden könnte, und ich hatte einige Probleme mit der Änderung der Heatmap im laufenden Betrieb (Heatmap durch eine andere mit Javascript ersetzen), denke, ich muss etwas mehr damit experimentieren, oder kontaktiere die Autor

Quelle

2012-11-01 21:09:06 Paulus

Erstellen von Heatmaps mit <canvas> Element?

Antwort

Verwandte Themen