Biểu đồ bên trong cửa sổ bật lên trong Javascript

10

Làm thế nào để hiển thị một biểu đồ bên trong cửa sổ bật lên? Tôi đang sử dụng Leaflet JS, có hỗ trợ cho plugin raphael http://dynmeth.github.com/RaphaelLayer/ . Có thể tạo một div bên trong cửa sổ bật lên? Tôi đã suy nghĩ về http://softwaritherjosh.com/raphy-charts/

Nếu không thể với Leaflet, tôi chỉ mở giải pháp bản đồ Raphael.

Cảm ơn

javascript web-mapping leaflet

— chống chảy
nguồn

1

Tôi đoán nó là có thể. Tôi thấy ví dụ này ở trang chủ của Tờ rơi:

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <br> Easily customizable.').openPopup();

Vì vậy, bạn có thể thêm đánh dấu như nội dung. Xem thẻ br ở trên.

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <div class="popup_custom_div"></div> Easily customizable.').openPopup();
//retrieve the div by class name take care if more then one maybe opened
var mydiv = document.getElementsByClassName( 'popup_custom_div' )[0];
mydiv.innerHTML = 'I am here';

— cavila
nguồn

2

Câu trả lời của @cavila chỉ là một phần của giải pháp. Bạn có thể đặt thẻ div cho biểu đồ trong cửa sổ bật lên, nhưng vấn đề phát sinh sau đó vì bạn sẽ cần lắng nghe sự kiện ".openPopup ()" để sau đó thực thi javascript. Nếu bạn không làm điều đó trong sự kiện đó, thì khi nó thực thi, nó sẽ không tìm thấy thẻ div vì nó chưa được chèn vào DOM. Có vẻ như tờ rơi hỗ trợ nghe sự kiện, do đó bạn sẽ cần thêm một cái gì đó như thế này vào đoạn mã trên:

map.on('popup', function(e) {
    //Run the chart code here like this
    var chart = new Charts.LineChart('chart1');
     chart.add_line({
        data: [[1, 828906, {tooltip: "my special point"}],[2, 566933],[3, 584150],[4,  
                 1072143],[5, 1622455],[6, 2466746],[7, 2427789]]
        });

     chart.draw();
});

— Jamie
nguồn

Vậy openPopup () không đồng bộ? Bởi vì trình thông dịch Javascript sẽ không thực thi câu lệnh tiếp theo cho đến khi trả về trước ngoại trừ các cuộc gọi lại được thực hiện sau đó đúng thời gian. Một sự thay thế nếu không có sự kiện nào sẽ được thực thi gộp cho sự tồn tại của "div" đó trong vòng lặp window.setTimeout. Cuộc gọi lại sự kiện sẽ nhanh hơn nhiều.

— cavila

1

Một cách sẽ là lắng nghe các sự kiện nhấp chuột trên các nhà sản xuất của bạn và tạo các biểu đồ một cách nhanh chóng. Dưới đây là một ví dụ: http://jsfiddle.net/6UJQ4/

Một điều không rõ ràng với tôi cho đến khi tôi bắt đầu chơi xung quanh là bindPopup của Leaflet có thể lấy một chuỗi hoặc một nút DOM. Ví dụ trên tạo một nút DOM, chuyển nó đến bindPopup sau đó tạo biểu đồ.

— Derek Swingley
nguồn

Có thể cho các sự kiện đa giác? Khi nhấp vào một số đa giác, một cửa sổ bật lên tương tự xuất hiện?

— ngược dòng

Có, nên có thể. Ví dụ của tôi là mã hóa cứng để sử dụng 50 làm giá trị cho biểu đồ nhưng bạn có thể làm bất cứ điều gì bạn thích bên trong hàm tạo biểu đồ.

— Derek Swingley

Bạn có thể vui lòng viết một ví dụ với dữ liệu đa giác hoặc Geojson trên jsfiddle như thế này bằng các điểm đánh dấu không? Tôi sẽ đánh giá rất cao.

— ngược dòng