function svgVirBarChart(jsondata,period,provinceName,IfKeyTag) { var href1="../AnalysisSupport/PzxAnalysis/findPzxAnalysisChangeNumByPeriod?periodTag="+period+"&IfKeyTag="+IfKeyTag; var href2="../AnalysisSupport/PzxAnalysis/findPzxAnalysisChangeNumByPeriodAndPro?periodTag="+period+"&IfKeyTag="+IfKeyTag+"&provinceTag="; $('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?即不显示箱体旁边的几个数字 var margin = {top: 5, right: 50, bottom: 75, left: 50}; var width =1100 - margin.left - margin.right; var height = 357- margin.top - margin.bottom; var min = Infinity, max = -Infinity; if(jsondata==1){ $.ajax({ type : 'GET', contentType : 'application/json', url: href1, 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+20) .attr("class", "box") .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 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)";}); 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 if(jsondata==2){ $.ajax({ type : 'GET', contentType : 'application/json', url: href2+encodeURI(provinceName), 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+20) .attr("class", "box") .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 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)";}); 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 + 2) { 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); if (s > max) max = s; if (s < min) min = s; } */ //alert(data1); 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; } 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+20) .attr("class", "box") .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 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("class", "x axis").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)" ;}); 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(); } } } }