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(); } } } }