pzxDetailBoxplot.js 10.7 KB
function svgVirBarChart(jsondata,pzxtitle,Period,ifkey,province,type,Relation,Cycle) {
	
	var href="../AnalysisSupport/PzxDetail/findPzxChangeNumBy?periodTag="+Period
    +"&IfKeyTag="+ifkey
    +"&provinceTag="+province
    +"&pzxTypeTag="+type
    +"&relationTag="+Relation
    +"&CycleTag="+Cycle;
	
   $('body').append("<div id='tiplayer' style='display:none' data-toggle='tooltip'></div>");   
   var tiplayer = $('#tiplayer'); 
	/////////每个箱体的属性
   var labels = false; // show the text labels beside individual boxplots?
   if(Cycle==1){
      var margin = {top: 10, right: 50, bottom: 60, left: 50};
   }else{
	  var margin = {top: 10, right: 50, bottom: 80, left: 50};
   }
   var  width =1100 - margin.left - margin.right;
   var height = 500 - margin.top - margin.bottom;
   	
   var min = Infinity,
       max = -Infinity;
   if(jsondata==1){
        $.ajax({
       
             type : 'GET',
             contentType : 'application/json',
             url: encodeURI(encodeURI(href)),
             dataType : 'text',
 //            async: false,   //异步操作的属性
             beforeSend: function(data) {
              },
             success: function(data) {
//                 alert(href);
                 for ( var i = 0; i < data.length; i++) {
						if (data == '\"') {
							data = data.replace("\"", "\'");
						}
					}
						data = eval("(" + data + ")");
						var data1 = [];
						var j=0;
						var e = null;
					 //alert("第二个:"+data);
						for ( var i = 0; i < data.length; i = i + 3) {
							if(i == 0){
								e = data[i];
								data1[j]=[];
								data1[j][0] = e;}
							if(e == data[i]){}else{
								j++;
								data1[j]=[];
								data1[j][0] = data[i];
							}
						       e = data[i]; // X轴的数据
							s = Math.floor(data[i + 1]), // y轴的数据
							d = data1[j][1];
							if (!d)
								d = data1[j][1] = [ s ];
							else
								d.push(s);
						  s1 =data[i + 2], // 时间
							d1 = data1[j][2];
							if (!d1)
								d1 = data1[j][2] = [ s1 ];
							else
								d1.push(s1);
							if (s > max)
								max = s;
							if (s < min)
								min = s;
						}
						//alert(data1);
						if(max>tt(data1)*1.1){
							max=tt(data1)*1.1;
							
						}
						removeout(data1,max);
						
						$("#boxplot").html("");
						var chart = d3.box()
						.whiskers(iqr(1.5))
						.height(height)
						.domain([min, max])
						.showLabels(labels);
						
						var svg = d3.select("div#boxplot1").append("svg")
						.attr("width", width + margin.left + margin.right)
						.attr("height", height + margin.top + margin.bottom+80)
						.attr("class", "box")    
						.append("g")
						.attr("transform", "translate(" + margin.left + "," + (margin.top+60) + ")");
						
						var x = d3.scale.ordinal()	   
						.domain( data1.map(function(d) { console.log(d); return d[0] } ) )	    
						.rangeRoundBands([0 , width], 0.7, 0.3); 		
			

					var xAxis = d3.svg.axis()
						.scale(x)
						.orient("bottom")
						.outerTickSize(0);

					// the y-axis
					var y = d3.scale.linear()
						.domain([min, max])
						.range([height + margin.top, 0 + margin.top]);
					
					var yAxis = d3.svg.axis()
				    .scale(y)
				    .orient("left")
				    .outerTickSize(0);

					 // draw y axis
					svg.append("g")
				        .attr("class", "y axis").attr({ "fill": "none","stroke": "#000", "stroke-width": "0.8px"})
				        .call(yAxis)
						.append("text") // and text1
						  .attr("transform", "rotate(-90)")
						  .attr("y", 6)
						  .attr("dy", ".71em")
						  .style("text-anchor", "end")
						  .style("font-size", "16px") 
						  .text("数量");			
					
					// draw x axis	
					svg.append("g") 
                    .attr({ "fill": "none","stroke": "#000", "stroke-width": "0.8px"})
                    .attr("transform", "translate(0," + (height  + margin.top ) + ")") 
                    .call(xAxis) 
                    .selectAll("text") .style("text-anchor", "end") 
                    .attr("dx", "-.8em") 
                    .attr("dy", ".15em") 
                    .attr("transform", function(d) { 
                    return "translate(-5,0)rotate(-90)";});

/*				        
					svg.append("g")
				      .attr("class", "x axis")
				      .attr("transform", "translate(0," + (height  + margin.top + 10) + ")")
				      .call(xAxis)
					  .append("text")             // text label for the x axis
				        .attr("x", (width/2)  )
				        .attr("y",  30 )
						.attr("dy", ".71em")
				        .style("text-anchor", "end")
						.style("font-size", "16px") 
				        .text(pzxtitle+"配置项变化分析"); 
*/				
					svg .append("text")             // text label for the x axis 
                    .attr("x", 580 ) 
                    .attr("y", -30) 
                    .attr("dy", ".71em") 
                    .style("text-anchor", "end") 
                    .style("font-size", "16px") 
                    .text(pzxtitle+"配置项变化分析"); 

					
					if(data1 == "" || data1 == null){
						  svg .append("text")             // text label for the x axis
					       .attr("x", (width/2)  )
					       .attr("y",  (height/2) )
						   .attr("dy", ".71em")
					       .style("text-anchor", "end")
						   .style("font-size", "16px") 
					       .text("暂无数据"); 
					  }else{
						  var color = d3.scale.category20();
							// draw the boxplots	
							svg.selectAll(".box")	   
						       .data(data1)
							   .enter().append("g")
							   .attr("transform", function(d) { return "translate(" +  x(d[0])  + "," + margin.top + ")"; } )
						       .attr("fill",function(d,i){return color(i);})
							   .call(chart.width(x.rangeBand())); 
					}
					      
             }
        });   
   }else{
	   for ( var i = 0; i < jsondata.length; i++) {
			if (jsondata == '\"') {
				jsondata = jsondata.replace("\"", "\'");
			}
		}
			data = eval("(" + jsondata + ")");
			var data1 = [];
			var j=0;
			var e = null;
		 //alert("第二个:"+data);
			for ( var i = 0; i < data.length; i = i + 3) {
				if(i == 0){
					e = data[i];
					data1[j]=[];
					data1[j][0] = e;}
				if(e == data[i]){}else{
					j++;
					data1[j]=[];
					data1[j][0] = data[i];
				}
			       e = data[i]; // X轴的数据
				s = Math.floor(data[i + 1]), // y轴的数据
				d = data1[j][1];
				if (!d)
					d = data1[j][1] = [ s ];
				else
					d.push(s);
			  s1 =data[i + 2], // 时间
				d1 = data1[j][2];
				if (!d1)
					d1 = data1[j][2] = [ s1 ];
				else
					d1.push(s1);
				if (s > max)
					max = s;
				if (s < min)
					min = s;
			}
			//alert(data1);
			if(max>tt(data1)*1.1){
				max=tt(data1)*1.1;
				
			}
			removeout(data1,max);
			console.log("maxtestbyerci:"+max);

			$("#boxplot").html("");
			var chart = d3.box()
			.whiskers(iqr(1.5))
			.height(height)
			.domain([min, max])
			.showLabels(labels);
			
			var svg = d3.select("div#boxplot1").append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom+80)
			.attr("class", "box")    
			.append("g")
			.attr("transform", "translate(" + margin.left + "," + (margin.top+60)+ ")");
			
			var x = d3.scale.ordinal()	   
			.domain( data1.map(function(d) { console.log(d); return d[0] } ) )	    
			.rangeRoundBands([0 , width], 0.7, 0.3); 		


		var xAxis = d3.svg.axis()
			.scale(x)
			.orient("bottom")
			.outerTickSize(0);

		// the y-axis
		var y = d3.scale.linear()
			.domain([min, max])
			.range([height + margin.top, 0 + margin.top]);
		
		var yAxis = d3.svg.axis()
	    .scale(y)
	    .orient("left")
	    .outerTickSize(0);

		
		 // draw y axis
		svg.append("g")
	        .attr("class", "y axis").attr({ "fill": "none","stroke": "#000", "stroke-width": "0.8px"})
	        .call(yAxis)
			.append("text") // and text1
			  .attr("transform", "rotate(-90)")
			  .attr("y", 6)
			  .attr("dy", ".71em")
			  .style("text-anchor", "end")
			  .style("font-size", "16px") 
			  .text("数量");				
		
		// draw x axis	
		svg.append("g") 
        .attr({ "fill": "none","stroke": "#000", "stroke-width": "0.8px"})
        .attr("transform", "translate(0," + (height  + margin.top) + ")") 
        .call(xAxis) 
        .selectAll("text") .style("text-anchor", "end") 
        .attr("dx", "-.8em") 
        .attr("dy", ".15em") 
        .attr("transform", function(d) { 
        return "translate(-5,0)rotate(-90)";});

		
/*		
		svg.append("g")
	      .attr("class", "x axis")
	      .attr("transform", "translate(0," + (height  + margin.top + 10) + ")")
	      .call(xAxis)
		  .append("text")             // text label for the x axis
	        .attr("x", (width/2)  )
	        .attr("y",  30 )
			.attr("dy", ".71em")
	        .style("text-anchor", "end")
			.style("font-size", "16px") 
	        .text(pzxtitle+"配置项变化分析"); 
*/	        
		svg .append("text")             // text label for the x axis 
        .attr("x", 580) 
        .attr("y",  -30) 
        .attr("dy", ".71em") 
        .style("text-anchor", "end") 
        .style("font-size", "16px") 
        .text(pzxtitle+"配置项变化分析");
		
		
		if(data1 == "" || data1 == null){
			  svg .append("text")             // text label for the x axis
		       .attr("x", (width/2)  )
		       .attr("y",  (height/2) )
			   .attr("dy", ".71em")
		       .style("text-anchor", "end")
			   .style("font-size", "16px") 
		       .text("暂无数据"); 
		  }else{
			  var color = d3.scale.category20();
				// draw the boxplots	
				svg.selectAll(".box")	   
			       .data(data1)
				   .enter().append("g")
				   .attr("transform", function(d) { return "translate(" +  x(d[0])  + "," + margin.top + ")"; } )
			       .attr("fill",function(d,i){return color(i);})
				   .call(chart.width(x.rangeBand())); 
		}
	    
   }
	

}



// Returns a function to compute the interquartile range.
function iqr(k) {
	return function(t, i) {
		 //alert(t); ///打印出来的就是expt不同值里面对应的数据
		var q1 = t.quartiles[0], q3 = t.quartiles[2], iqr = (q3 - q1) * k, i = -1, j = t.length;
		// alert("q1:"+q1+" q3:"+q3+" iqr:"+iqr);
		while (t[++i] < q1 - iqr);		
		while (t[--j] > q3 + iqr);
		//alert(i);
		return [ i, j ];
		
	};
}
function boxQuartiles1(d) {
	  return [
	    d3.quantile(d, .25),
	    d3.quantile(d, .5),
	    d3.quantile(d, .75)
	  ];
	}
function tt(t){
     var q3andiqr=0;
	 for(var i = 0;i<t.length;i++){
		 //console.log("tttttttttttttttt:"+t[i][1]);
		 var quartileData = boxQuartiles1(t[i][1]);
	      var q1 = quartileData[0],q2 = quartileData[1], q3 = quartileData[2], iqr = (q3 - q1) * 1.5;
       
	   if(q3+iqr>q3andiqr){
	      q3andiqr=q3+iqr;
	   }    
	 }
	   

	 return q3andiqr;
}
function removeout(data,maxvalue){
    
    for(var i=0;i<data.length;i++){
   
	  for(var j=data[i][1].length-1;j>=0;j--){
	      if(data[i][1][j]>maxvalue){ 
	        data[i][1].pop();
		    data[i][2].pop();
	      }
	  }
    }
  
}