highcharts 实现动态加载多个饼图

//弄了好久  最后在晚上找到一个办法  利用数组给其填数据

<script type="text/javascript">

	var chartTotal;
   	var optionsTotal;
   	<c:forEach items="${devices}" var="data" varStatus="status">
		var deviceArr${data.id}=new Array();
		var chart${data.id};
		var options${data.id};
	</c:forEach>
	
$(document).ready(function() {
	$("#from").datepicker({
	      changeMonth: true,
	      numberOfMonths: 1
	});
	
	Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
	    return {
	        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
	        stops: [
	            [0, color],
	            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
	        ]
	    };
	});
getData(null,true);
});
function show(arrs){
	var containerTotal='containerTotal';
	$('#'+containerTotal).attr('style','height: 400px; margin: 0px 10px 60px 0px');
	var optionsTotal = new Highcharts.Chart({
	    chart: {
	        plotBackgroundColor: null,
	        plotBorderWidth: null,
	        plotShadow: false,
	        renderTo: 'containerTotal'
	    },
	    title: {
	        text: 'domain IP 归属地 top100 运营商占比'
	    },
	    tooltip: {
		    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	    },
	    plotOptions: {
	        pie: {
	            allowPointSelect: true,
	            cursor: 'pointer',
	            dataLabels: {
	                enabled: true,
	                color: '#000000',
	                connectorColor: '#000000',
	                formatter: function() {
	                    return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*100)/100 +' %';
	                }
	            }
	        }
	    },
	    series: [{
	        type: 'pie',
	        name: '占比',
	        data:arrs
	    }]
	});
	<c:forEach items="${devices}" var="data">
	var containerDeviceId='container${data.id}';
		$('#'+containerDeviceId).attr('style','height: 400px; margin:  0px 10px 0px 0px');
        options${data.id}={
        		chart: {
        	        plotBackgroundColor: null,
        	        plotBorderWidth: null,
        	        plotShadow: false,
	                renderTo: 'container${data.id}'
        	    },
        	    title: {
        	        text: 'domain IP 归属地 top100 运营商占比'
        	    },
        	    tooltip: {
        		    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        	    },
        	    plotOptions: {
        	        pie: {
        	            allowPointSelect: true,
        	            cursor: 'pointer',
        	            dataLabels: {
        	                enabled: true,
        	                color: '#000000',
        	                connectorColor: '#000000',
        	                formatter: function() {
        	                    return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*100)/100 +' %';
        	                }
        	            }
        	        }
        	    },
        	    series: [{
        	        type: 'pie',
        	        name: '占比',
        	        data:deviceArr${data.id}
        	    }]
        };
</c:forEach>
}
var isClick=0;
var lastFromStr='';
function getData(from,isInit){
	if(isClick==0){
		isClick=1;
		if(!isInit){
    		$('#loading').dialog('open');
		}
    	if(from==null){
    		from = $("#from").val();
    		lastFromStr='';
    	}else{
    		lastFromStr=from;
    	}
    	var to = $("#to").val();
    	jQuery.post("getStatusCodeData",{
 			"from":from,
 			"to":to,
 			"customerId":"${customerId}"
 		},function(dataValue){
 		$('#loading').dialog('close');
 			if(dataValue.myStatus==1){
	 			  var arrs = new Array();  
 				<c:forEach items="${stauCodeDataTypeList}" var="typeData" varStatus="step">
	 		          var tmp = new Array();
	 		          tmp[0] = '${typeData}';  
	 		          tmp[1] = dataValue.allData['${typeData}'];
	 		         arrs[${step.index}] = tmp;
	 			</c:forEach>
	 			show(arrs);//1.这是得到数据然后传到一个方法 方法中直接产生饼图
	 			<c:forEach items="${devices}" var="data">
		 			<c:forEach items="${stauCodeDataTypeList}" var="typeData" varStatus="step">
			          	var tmp = new Array();
			          	tmp[0] = '${typeData}';  
			         	tmp[1] = dataValue.allData['${typeData}'];
			         	deviceArr${data.id}[${step.index}] = tmp;
					</c:forEach>
		            chart${data.id} = new Highcharts.Chart(options${data.id});//2.这是线产生highcharts中的代码然后把数据填进去后再生成highcharts
 				</c:forEach>
 			}else if(dataValue.myStatus==-2){
 				alert('请正确输入时间');
 			}else if(dataValue.myStatus==-3){
 				alert('最大只能查3个月内数据');
 			}else{
 				alert('网络延迟，请稍后重试');
 			}
 			isClick=0;
 		},"json");
	}
}

//此代码没有优化（业务太多 - -） 可以根据自己的需求简写