Question

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) {

    }
});

};

Answer 1

最近，我不得不将饼图实现为地图上许多位置的标记。在地图应用程序上有许多位置也需要标记聚类...在我的特殊情况下显示饼图作为叠加不适合，这就是我构建简单库的原因。也许说它是库太多了，因为它只是现在生成pie-char svg节点的一个函数。 Github存储库以及如何使用函数以及下面的google-maps的示例 Repository

谷歌地图上的饼图

1 个答案: