Openlayers3中统计图的实现：结合highcharts实现统计图

概述：

在前文中讲到了在Arcgis for js中统计图的实现，在本文，讲述在Openlayers3中结合highcharts实现统计图。

 

实现：

在Openlayers3中实现统计图比较方便，通过ol.Overlay即可。首先，了解下Overlay。在OL3的借口文档中，Overlay的描述如下：

An element to be displayed over the map and attached to a single map location。

大概意思就是一个有空间位置的可以在地图上展示的要素。

关键代码：

$("#addchart").on("click",function(){
    for(var i=0;i<data.length;i++){
        var d = data[i];
        var pt = [d.x, d.y];
        var domid = "chart"+i;
        $("#chart").append("<div id='"+domid+"'></div>");
        var chart = new ol.Overlay({
            position: pt,
            positioning: ol.OverlayPositioning.CENTER_CENTER,
            element: document.getElementById(domid)
        });
        map.addOverlay(chart);
        addChart(domid,d,100);
    }
});

function addChart(domid,data,size){
    $('#'+domid).highcharts({
        chart: {
            backgroundColor: 'rgba(255, 255, 255, 0)',
            plotBorderColor: null,
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: null,
            plotShadow: false,
            width: size,
            height: size
        },
        tooltip: {
            pointFormat: '<b>{point.percentage:.1f}%</b>'
        },
        credits:{
            enabled:false
        },
        title: {
            text: ''
        },
        plotOptions:{
            pie: {
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: [{
            type: 'pie',
            name: data.name,
            data: data.data
        }]
    });
}

上述代码运行后的效果如下：

上述示例的完整代码如下：

[html] view plain copy print?