【开发日志（塌陷地）】jqGrid数据获取以及根据表格数据动态生成柱状图、饼状图

今年由于疫情原因无法开学，课程也变成了自学和网课，从塌陷区项目验收到现在差不多半年了，甲方提出了一些新的需求，现在开学推迟了，只能在家里复工，博客也就继续更了。
简单来说，这次的任务是在“统计报表”这个目录下的每个二级目录的页面添加柱状图和饼状图，从数据库传给前端的部分已经完成（即页面已有表格），绘制柱状图和饼状图的工具选择的是chart.js插件，任务就是根据表格动态的生成柱状图和饼状图，关心的数据是“未治理塌陷地面积”。
主要工作：①用chart.js绘制柱状图和饼状图；②把jqgrid的数据取出来，传给要绘制的柱状图和饼状图
注意：取数据的时候需要在数据表加载完成后再取出，注意生成图表这部分代码写在什么位置才能获取到表格数据。
首先引入chart.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

设置画布（分别是柱状图和饼状图）：

<!-- 创建图表前，先实例化Chart类 -->
<canvas id="myChart"></canvas>
<canvas id="myPieChart"></canvas>

写一个函数用于获取jqGrid表格所有数据：

//jqGrid获取表格所有数据
function getJQAllData(){
	//获取grid对象
	var obj = $("#grid-table");
	//获取rowid的值
	var rowIds = obj.getDataIDs();
	//console.log(rowIds);
	//初始化数组arrayData，存放rowData
	var arrayData = new Array();
	if(rowIds.length >0){
		for(var i = 0; i < rowIds.length; i++)
			arrayData.push(obj.getRowData(rowIds[i]));
	}
	//console.log(arrayData);
	return arrayData;
}

生成柱状图和饼状图，注意代码位置：

				jQuery(grid_selector).jqGrid(
					jQuery.extend(true,defaultOptions,{
						url:'../annual/loading?oper=search&mineName=<%=session.getAttribute("mineName")%>',  //获取数据源
						colNames: colNames.concat(myColNames),
						colModel: colModel.concat(myColModel),
						pager : pager_selector,
						editurl: '../annual/loading',//nothing is saved
						caption: "年度汇总",
						loadComplete: function(){//加载完表格再生成柱状图
							console.log('loadComplete');
							//----柱状图、饼状图----	
							var allData = getJQAllData();//获取所有数值
							console.log(allData);
							var labels = [];
							var data = [];
							for(var i = 0; i < allData.length; i++){
								labels.push(allData[i]['mineName']);
								data.push(Number(allData[i]['ungoverndArea']));
							}
							
								
						    var ctx = document.getElementById("myChart").getContext("2d");			
							var myChart = new Chart(ctx, {
							    type: 'bar',
							    data: {
							        labels: labels,
							        datasets: [{
							            label: '未治理塌陷地面积(亩)',
							            data: data,
							            backgroundColor:'rgba(54, 162, 235, 1)',
							            borderColor:'rgba(54, 162, 235, 1)',
							            borderWidth: 1
							        }],
							    },
							    options: {
							        scales: {
							            yAxes: [{
							                ticks: {
							                    beginAtZero: true
							                }
							            }]
							        }
							    }
							}); 
							 
							 
							var ctx2 = document.getElementById("myPieChart").getContext("2d");	
							var myPieChart = new Chart(ctx2, {
								type: 'pie', 
								data: {
							        labels: labels,
							        datasets: [{
							            label: '未治理塌陷地面积(亩)',
							            data: data,
							            backgroundColor:[
							            	'rgba(131, 175, 155, 1)',
							            	'rgba(200, 200, 169, 1)',
							            	'rgba(249, 205, 173, 1)',
								           	'rgba(252, 157, 154, 1)', 
								            'rgba(137, 157, 192, 1)',
								            'rgba(92, 167, 186, 1)',
								            'rgba(175, 215, 237, 1)',
								            'rgba(181,196,177, 1)',
								            'rgba(219, 207, 202, 1)',
								            'rgba(162, 126, 126, 1)',
							            ],
							           
							            //莫兰迪
							           /*   backgroundColor:[
							            	'rgba(156,168,184, 1)',
							            	'rgba(181,196,177, 1)',
							            	'rgba(201, 192, 211, 1)',
								           	'rgba(224, 205, 207, 1)', 
								            'rgba(193, 203, 215, 1)',
								            'rgba(216,202,175, 1)',
								            'rgba(123, 139, 111, 1)',
								            'rgba(134, 150, 167, 1)',
								            'rgba(122, 114, 129, 1)',
								            'rgba(162, 126, 126, 1)',
							            ], */
							            /* borderColor:[
							            	'rgba(156,168,184, 1)',
							            	'rgba(181,196,177, 1)',
							            	'rgba(201, 192, 211, 1)',
								           	'rgba(224, 205, 207, 1)', 
								            'rgba(193, 203, 215, 1)',
								            'rgba(216,202,175, 1)',
								            'rgba(123, 139, 111, 1)',
								            'rgba(134, 150, 167, 1)',
								            'rgba(122, 114, 129, 1)',
								            'rgba(162, 126, 126, 1)',
							            ],
							            borderWidth: 1*/ 
							        }],
							    },
								options: {
							        scales: {
							            yAxes: [{
							                ticks: {
							                    beginAtZero: true
							                }
							            }]
							        }
							    }
							}); 
							            
				        	//柱状图、饼状图---The end---
						}
					})
				)		

运行效果截图：



注意：由于饼状图涉及到了颜色，这里我是按照行来统计的，即有几条记录就应该有几个饼状图切片。经测试，当定义的颜色数量与切片数不同时，若定义颜色数量<切片数，则多出来的会是有透明度的灰色；若定义颜色数量>切片数，则按顺序显示颜色，最后定义的颜色不会显示出来。
这里的解决方法是定义大于记录条数的数据，且尽可能使得某颜色与其顺序之前的颜色符合一定的配色方案，因为我们的项目中该项统计切片最多10条，才能有代码中的这种解决方法，成百上千的切片数的情况不适用。但仔细想想，这本质是一个饼状图，谁会给饼状图切个成百上千片呢…
这篇先写到这里吧，以后有值得记录的再继续写。