boxplotDetailCircle.js

function boxplotDetailcircleTest(circleData1) {
    var a=[], a1=[];
    var id = 1;
    for(var t=0;t<circleData1.length;t++){
    	   var data2 = circleData1[t][1];
    	   //var data3 = circleData1[t][2];
    	   if(data2 == "" || data2 == null){
    		   id--;
    	   }else{
   	    	var lowtime = getTimeUpperValue().valueOf();   //加入工单异常处理时长的限制
			var uptime = getTimeLowerValue().valueOf();
			if(lowtime == 0 && uptime == 0){
				id = circleData1.length;
				for(var r = 0 ;r <data2.length ; r++){
					var b = [circleData1[t][0]], b1 = [circleData1[t][0]];
					b.push(data2[r]); 
					//b1.push(data3[r]);
					a.push(b);
			    	//a1.push(b1);
				}
			}else{
				for(var r = 0 ;r <data2.length ; r++){
					data2[r] = parseFloat(data2[r]);
					if(data2[r] < uptime && lowtime <= data2[r]){
						if(a.length != 0 && a[a.length-1][0] != circleData1[t][0]){
							id++;
						}
						var b = [circleData1[t][0]], b1 = [circleData1[t][0]];
						b.push(data2[r]); 
						//b1.push(data3[r]);
						a.push(b);
				    	//a1.push(b1);
					}
				}
			}
    	   }

	}
    var margin = {top: 30, right: 50, bottom: 70, left: 50};
	   var  width =500 - margin.left - margin.right;
	   var height = 400 - margin.top - margin.bottom;
	   	var padding = 20;
	  
  $("#boxplotDetailCircle").html("");
  var svg = d3.select("div#boxplotDetailCircle").append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom+60)
		.attr("class", "box")    
		.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	
  var x = d3.scale.ordinal()	   
       .domain( a.map(function(d) { return d[0]; } ) )	    
       .rangeRoundBands([0 ,width-padding]); 		

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

	// the y-axis
  var y = d3.scale.linear()
		.domain([d3.min(a,function (d){return d[1];})-10, d3.max(a,function (d){return d[1];})])
		.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")
     .call(yAxis);		

// draw x axis	
svg.append("g")
  .attr("class", "x axis")
  .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)" ;});
  /*.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("关键环节"); */
  
  if(a == "" || a == 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{
	  svg.selectAll("circle")
	  .data(a)
	  .enter()
	  .append("circle")
	  .attr("cx", function (d,i) { return x(d[0]); } )
	  .attr("cy", function(d,i) {
	       return y(d[1]);
	    })
	  .attr("r", 3)
	  .attr("transform", "translate("+(width-padding)/(id*2)+",0)");
	  svg.selectAll("circle").data(a).append("svg:title")
      .text(function(d) { return d[0]+":"+d[1]; });
   }

}
function boxplotDetailCircle(period,Time,provinceId,keyBusinessId,keyLinkName,minValue){
	var  all = "?MultiType=4"  //单省单环节多时段箱体图
		   +"&province="+provinceId   //省份id(单省)
		   +"&business="+keyBusinessId  //业务id(单业务)
		   +"&link=-1"  // 环节ID(多环节)
		   +"&linkName="+keyLinkName  // 环节名称(单省单环节多时段箱体图只能显示名称)
		   +"&netelement="+"-1"  //网元这里应该传什么？  ***************************
		   +"&start="+period.split(",")[0]  //开始日期
	       +"&end="+period.split(",")[1]  //结束日期
		   +"&time_ids="+Time	//时间段Id(需要)
		   +"&minValue="+minValue;    
	 
	 $.aqax({
		type : "get",
		contentType : 'application/qson',
		url : '../MonitorOperation/KeyLinkProcessAnalysis/boxplotDetailOutlier/'+all,
		dataType : 'text',
		/*async: false ,*/
		beforeSend : function(data) {
		},
		success : function(data) {
			for ( var i = 0; i < data.length; i++) {
				if (data == '\"') {
					data = data.replace("\"", "\'");
				}
			}
			data = eval("(" + data + ")");
			var circleData1=[];
			var q=0;
			 for(var i = 0;i<data.length;i++){
	            	var e = data[i];
	            	circleData1[q]=[];
	            	circleData1[q][0] = e[0]; 
	            	for(var t = 1; t < e.length; t++){
	            		  if(circleData1[q][1] == "" || circleData1[q][1] == null){
				    		   circleData1[q][1]=[e[t]];
				    		   circleData1[q][2]=[e[t+1]];
				    	   }else{
				    		   circleData1[q][1].push(e[t]);
				    		   circleData1[q][2].push(e[t+1]);
				    	   }
	            	}
					q++;
	            }
			 boxplotDetailData = circleData1;
		    boxplotDetailcircleTest(boxplotDetailData);
		
		  }});
		}