Screenshot attached我想在谷歌地图上绘制饼图。我的代码在chrome上正常工作,但在IE 11中,当饼图数量> 50时,它需要花费大量时间。
在Chrome中它的工作正常,我测试了超过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) {
}
});
};
最近,我不得不将饼图作为地图上许多位置的标记。在地图应用程序上有许多位置也需要标记聚类...在我的特殊情况下显示饼图作为叠加不适合,这就是我构建简单库的原因。也许说它是库太多了,因为它只是现在生成pie-char svg节点的一个函数。 Github存储库以及如何使用函数以及下面的google-maps的示例。 Repository