2016-07-26 4 views
0

Screenshot attached Google지도에 원형 차트를 플롯하려합니다. 내 코드는 Chrome에서 잘 작동하지만 IE 11에서는 원형 차트 수가 50보다 많으면 엄청난 시간이 걸립니다.Google지도의 원형 차트

크롬에서 나는 100 개 이상의 파이 차트로 테스트했습니다.

추가 정보가 필요하면 알려주십시오.

function drawPieCharts() { 

var latLng = new google.maps.LatLng(37.0902, 95.7129); 
var map = new google.maps.Map($('#mapUsers')[0], { 
    zoom: 2, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
google.maps.event.addListenerOnce(map, 'idle', function() { 

}); 
var data; 
var options; 
var marker; 
$.ajax({ 
    type: "POST", 
    url: "Dashboard.aspx/GetCyberRiskViewMap", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function (data) { 
     var ChartSourceobj = JSON.parse(data.d); 
     for (var i = 1; i < ChartSourceobj.length ; i++) { 
      latLng = new google.maps.LatLng(ChartSourceobj[i].latitude, ChartSourceobj[i].longitude); 
      data = google.visualization.arrayToDataTable([ 
       ['Events', 'User Events'], 
       ['Malicious', ChartSourceobj[i].malicious_count], 
       ['Suspicious', ChartSourceobj[i].suspicious_count], 
       ['New', ChartSourceobj[i].new_count] 

      ]); 

      options = { 
       fontSize: 10, 
       backgroundColor: 'transparent', 
       datalessRegionColor: '#abafb8', 
       legend: 'none', 
       pieSliceText: 'none', 
       slices: { 0: { color: '#FE2E2E' }, 1: { color: '#FF8000' }, 2: { color: '#FACC2E' } } 

      }; 

      marker = new ChartMarker({ 
       map: map, 
       position: latLng, 
       width: '80px', 
       height: '80px', 
       chartData: data, 
       chartOptions: options, 
       events: { 
        click: function (event) { 

        } 
       } 
      }); 

     } 

    }, 
    error: function (data) { 

    } 
}); 

}};

+0

디버깅 도움말 ("이 코드가 작동하지 않는 이유는 무엇입니까?)"에는 원하는 동작, 특정 문제 또는 오류 및 질문 자체에서 재현하는 데 필요한 가장 짧은 코드가 포함되어야합니다. 분명한 문제 성명이없는 질문은 다른 독자에게 유용하지 않습니다. 참조 : [최소한의 완전하고 검증 가능한 예제를 만드는 방법] (http://stackoverflow.com/help/mcve). – geocodezip

+0

추가 정보가 필요하면 알려주십시오. –

+0

본질적으로 코드에 문제가 없습니다. 각 브라우저가 고유 한 방식으로 DOM을 처리한다는 것입니다. Canvas, SVG 등을 사용하는 경우, ChartMaker를 사용할 때 내부적으로 많은 영향을받습니다. 모든 DOM 요소는 브라우저 성능에 영향을줍니다. – amenadiel

답변

0

최근 맵의 많은 위치에 마커로 파이 차트를 구현해야했습니다. 맵 애플 리케이션에 많은 위치가 필요 마커 클러스터링 ... 필자의 특별한 경우에는 파이 차트를 오버레이로 표시하는 것이 적합하지 않았기 때문에 간단한 라이브러리를 만들었습니다. 어쩌면 라이브러리라고 말하는 것은 너무 많습니다. 파이 - char svg 노드를 생성하는 것은 지금은 단지 하나의 함수이기 때문입니다. 예제와 Github 저장소 아래에 Google지도와 함께 기능을 사용하는 방법.
Repository