2016-07-26 11 views
0

Screenshot attached Ich möchte Kreisdiagramm auf Google Karte darstellen. Mein Code funktioniert gut auf Chrom, aber in IE 11, wenn die Anzahl der Kreisdiagramme> 50 ist, dauert es sehr lange.Kreisdiagramm auf Google Map

In Chrom funktioniert es gut Ich habe mit mehr als 100 Kreisdiagramme getestet.

Bitte lassen Sie mich wissen, wenn Sie weitere Informationen benötigen.

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

Fragen, die Debugging-Hilfe suchen ("Warum funktioniert dieser Code nicht?") Müssen das gewünschte Verhalten, ein bestimmtes Problem oder einen Fehler und den kürzesten Code enthalten, der in der Frage selbst reproduziert werden muss. Fragen ohne eine klare Problemstellung sind für andere Leser nicht nützlich. Siehe: [Erstellen eines minimalen, vollständigen und überprüfbaren Beispiels] (http://stackoverflow.com/help/mcve). – geocodezip

+0

Bitte lassen Sie mich wissen, wenn Sie weitere Informationen benötigen –

+0

Es ist nichts in sich falsch mit Ihrem Code. Es ist nur so, dass jeder Browser auf seine Art mit dem DOM umgeht. Es hängt viel von der inneren Funktionsweise dieses 'ChartMakers' ab, ob Sie Canvas, SVG oder was auch immer verwenden. Jedes DOM-Element hat seinen Einfluss auf die Leistung des Browsers. – amenadiel

Antwort

0

Kürzlich musste ich Tortendiagramme als Markierungen für viele Orte auf der Karte implementieren. Für viele Standorte in der Karten-App war auch ein Marker-Cluster erforderlich ... In meinem speziellen Fall passte das Anzeigen von Kreisdiagramm als Overlay nicht zusammen, deshalb habe ich eine einfache Bibliothek erstellt. Vielleicht zu sagen, dass es Bibliothek ist zu viel, weil es nur eine Funktion für den Moment ist, die Pie-Char Svg Node generiert. Github-Repository mit Beispiel, wie man Funktion zusammen mit Google-Karten unten benutzt. Repository