Javascript의 팝업 창 내부 차트

10

팝업 창 안에 차트를 표시하는 방법은 무엇입니까? 나는 raphael 플러그인 http://dynmeth.github.com/RaphaelLayer/를 지원하는 Leaflet JS를 사용하고 있습니다. 팝업 창 안에 div를 만들 수 있습니까? http://softwarebyjosh.com/raphy-charts/ 에 대해 생각하고있었습니다 .

Leaflet으로 가능하지 않다면 Raphael 맵 솔루션 만 열었습니다.

감사

javascript web-mapping leaflet

— 역류
소스

1

가능하다고 생각합니다. Leaflet의 홈 페이지에서이 예제를 봅니다.

// 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();

따라서 마크 업을 컨텐츠로 추가 할 수 있습니다. 위의 br 태그를 참조하십시오.

// 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
소스

2

@cavila의 답변은 솔루션의 일부일뿐입니다. 차트에 div 태그를 팝업에 넣을 수는 있지만 ".openPopup ()"이벤트를 듣고 raphy-carts javascript를 실행해야하기 때문에 문제가 발생합니다. 해당 이벤트에서 수행하지 않으면 DOM에 삽입되지 않았기 때문에 div 태그를 찾을 수 없습니다. 전단지가 이벤트 리스닝을 지원하는 것처럼 보이므로 위 코드에 다음과 같은 것을 추가해야합니다.

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();
});

— 제이미
소스

그래서 openPopup ()은 비동기입니까? Javascript 인터프리터는 나중에 리턴되는 콜백을 제외하고 이전 리턴까지 다음 명령문을 실행하지 않기 때문입니다. window.setTimeout 루프에서 해당 "div"의 존재에 대해 풀링을 실행하는 이벤트가없는 경우의 대안입니다. 이벤트 콜백이 훨씬 빠릅니다.

— cavila

1

한 가지 방법은 제조업체에서 클릭 이벤트를 듣고 차트를 즉시 작성하는 것입니다. 예를 들면 다음과 같습니다. http://jsfiddle.net/6UJQ4/

내가 놀기 시작할 때까지 분명하지 않은 한 가지는 Leaflet의 bindPopup 이 문자열 이나 DOM 노드를 취할 수 있다는 것 입니다. 위의 예제는 DOM 노드를 작성하여 bindPopup에 전달한 다음 차트를 작성합니다.

— 데릭 스윙 리
소스

다각형 이벤트에서도 가능합니까? 일부 다각형을 클릭하면 비슷한 팝업이 나타 납니까?

— againstflow

예, 가능해야합니다. 내 예제는 차트의 값으로 50을 사용하도록 하드 코딩되었지만 차트를 만드는 함수 내에서 원하는 것을 할 수 있습니다.

— Derek Swingley

마커를 사용하여 jsfiddle에서 다각형 또는 geojson 데이터로 예제를 작성할 수 있습니까? 대단히 감사하겠습니다.

— againstflow