Có thư viện JavaScript nào cho phép bạn tạo bản đồ nhiệt bằng các tính năng hiển thị đồ họa trong trình duyệt chẳng hạn như <canvas> hoặc SVG không?Tạo bản đồ nhiệt bằng phần tử <canvas>?
Tôi biết về HeatMapAPI.com, nhưng bản đồ nhiệt của chúng được tạo ở phía máy chủ. Tôi nghĩ rằng trong thời đại của <canvas> yếu tố chúng ta không cần nữa!
Nếu không có gì giống như vậy, có tình nguyện viên nào tham gia tạo công cụ như vậy không?
Tôi tạo ra một bản demo bao gồm một bản đồ nhiệt thời gian thực với các <canvas> phần tử và javascript. Tôi cũng đã thêm mã được tài liệu bên cạnh mẫu bản đồ nhiệt. Quá trình tạo bản đồ nhiệt dựa trên bản đồ alpha trong phần tử canvas phụ thuộc vào chuyển động của chuột của người dùng. Bạn có thể xem bản trình diễn của mình ngay tại đây: http://www.patrick-wied.at/static/heatmap/
Cảm ơn bản demo đó, rất hữu ích +1 –
Xin chào Patrick. Có thể cập nhật heatmap.js để làm việc trong một chủ đề riêng biệt (sử dụng web-worker), vì vậy nếu có rất nhiều dữ liệu được vẽ, bạn chỉ yêu cầu nhân viên tính toán canvas ngoài màn hình và gửi cho bạn canvas khi xong rôi? – Cristy
Chào Cristy. Thật không may, điều đó là không thể do việc ghép nối chặt chẽ với phần tử canvas và công nhân web không hỗ trợ canvas. Nếu bạn đang tìm kiếm hiển thị thêm datapoints tôi có tin tốt: Tôi hiện đang làm việc trên heatmap.js v2 và đã làm một số tối ưu hóa hiệu suất lớn. trong v2 bạn có thể hình dung ít nhất 20k datapoints mà không nhận thấy bất kỳ tổn thất hiệu suất nào –
Tôi đã phát bằng bản đồ nhiệt cách đây vài năm. Xem http://www.urbigene.com/treemapphp/, thuật toán xuất phát từ đây: http://www.cs.umd.edu/hcil/treemap-history/
Anh ấy đang nói về Heatmaps và không phải là Biểu đồ dạng cây nhỏ :) –
hopps :-) trông giống như tôi :-) – Pierre
Tôi tạo ra một bản đồ hit với sự giúp đỡ của Google Visualization API [http://code.google.com/apis/visualization/documentation/]. Nó sử dụng SVG & VML và cũng tương thích với trình duyệt chéo. Hy vọng nó sẽ giúp.
bạn có thể chia sẻ hình ảnh nào bạn đã sử dụng không? Tôi không thấy bản đồ nhiệt trong thư viện hình ảnh hóa (http://code.google.com/apis/visualization/documentation/gallery.html) Điều tôi muốn làm là đặt bản đồ nhiệt lên Google Maps. Tôi biết rằng tôi có thể sử dụng điều này: http://code.google.com/p/gheat/, nhưng GHeat không sử dụng
Tôi có một số mã js/canvas/web worker here mặc dù có rất nhiều công việc có thể được thực hiện với nó. Nó cũng được đẩy trực tuyến tại http://heatmapthing.heroku.com/. Trình duyệt của bạn cần hỗ trợ nhân viên web cho việc này.
Vui lòng gửi yêu cầu kéo nếu bạn cải thiện. Việc làm mịn giả gauss là slooooooooow là địa ngục ngay bây giờ.
Tôi cũng đã thử, nhưng không làm Gaussian làm phẳng bản thân mình, tôi để canvas làm điều đó cho tôi. Về cơ bản tôi vẽ một gradient xuyên tâm cho mọi điểm trong thang màu xám và sau đó tô màu hình ảnh tỷ lệ xám này (xem "Creating Heat Maps with .NET 2.0 (C#)" để có giải thích chi tiết, việc triển khai của tôi khác một chút).
Kết quả trông như thế này:
Hiện vẽ không phải là xấu trên Chrome/Chromium. Tôi nghĩ phần tốn nhiều thời gian nhất là việc tô màu, bởi vì tôi đang lặp qua mọi pixel.
Bạn có thể tìm mã ở đây: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js
Heatcanvas trông khá tốt. Nó cũng có một phần mở rộng tờ rơi để chạy trên đầu trang của OpenStreetMap https://github.com/sunng87/heatcanvas
nó chạy khá tốt trên vài điểm (< 200) hoặc lâu hơn, nhưng được một chút chậm trên hàng ngàn điểm. Tôi nghĩ rằng nó cũng có thể tính toán lại thường xuyên hơn mức cần thiết sau khi xoay và thu phóng, và tôi đã gặp phải một số vấn đề với việc thay đổi bản đồ nhiệt (thay thế bản đồ nhiệt bằng cách sử dụng javascript), tôi cần thử nghiệm nhiều hơn một chút, hoặc liên hệ với tác giả
IE 8 trở xuống không có hỗ trợ canvas. –
Có, nhưng nhờ vào Explorer Canvas (ExCanvas), IE có hỗ trợ một phần cho thẻ Canvas –
Đúng, nhưng đó là một loại tát cùng nhau khắc phục nhanh chóng. –