d3.js多系列柱状图

bar0();
function bar0() {
var dataset=[]; 
var xMarks=[]; 
var w=800; 
var h=520; 
var padding=40; 
//数据 
	 var lineNames=[]; //保存系列名称 
	 var Color = d3.scale.category20();
	 
	 <%ls=a[1][0];
	 for(int ii=2;ii<zhibiao.length+2;ii++){ls=a[1][0];%>
		 var shuju=[];
		 <%for(int i=1;i<a.length;i++){
		 if(a[i][0].equals(ls)){%>
	 shuju.push(<%=a[i][ii]%>);<%ls=a[i][0];
	 }else{	 %>dataset.push(shuju);shuju=[<%=a[i][ii]%>];<%ls=a[i][0];
}}%>
	 dataset.push(shuju);
		 <%}%>

//产生数据 
function getData() 
{ 
	 <%for(int i=1;i<a.length;i++){%>
	 xMarks.push("<%=a[i][1]%>");
	 <%}%>
	 <%for(int i=0;i<tuli.length;i++){
	 	if(tuli[i].length()>19){tuli[i]=tuli[i].substring(0,16)+"...";}
	 	String[] barname=new String[tuli.length];
	 	for(int iii=0;iii<tuli.length/gsnum;iii++){
		 	for(int ii=0;ii<gsnum;ii++){
	 		barname[ii+gsnum*iii]=tuli[tuli.length/gsnum*ii+iii];
	 	}}
	 	%>
	 lineNames.push("<%=barname[i]%>");
	 <%}%>
	 //console.log(xMarks);
	 //console.log(lineNames);
} 

	 //判断是否多维数组，如果不是，则转为多维数组，这些处理是为了处理外部传递的参数设置的，现在数据标准，没什么用 
if(!(dataset[0] instanceof Array)) 
{ 
var tempArr=[]; 
tempArr.push(dataset); 
dataset=tempArr; 
}

//模拟数据 
getData(); 

//定义画布 
var svg=d3.select("body") 
.append("svg") 
.attr("width",w) 
.attr("height",h); 


//x比例尺
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset[0].length))
.rangeRoundBands([0,w-padding],0.2);

max=getMaxdata(dataset);
//纵坐标轴比例尺 
var yScale = d3.scale.linear() 
.domain([0,max]) 
.range([0,280]); 

//定义横轴 
var xAxis = d3.svg.axis() 
.scale(xScale) 
.orient("bottom") 
.ticks(dataset[0].length); 

//添加横坐标轴并通过编号获取对应的横轴标签 
var xBar=svg.append("g") 
.attr("class","axis") 
.attr("transform", "translate(40," + (h - 240) + ")") 
.call(xAxis) 
.selectAll("text") 
.attr("transform", "rotate(90)")
.style("text-anchor", "start")
.text(function(d){return xMarks[d];}); 


xColumnWidth= d3.scale.ordinal();
xColumnWidth.domain(lineNames).rangeRoundBands([0, xScale.rangeBand()]);
//console.log(dataset[0].length);
for(var xid=0;xid<dataset.length;xid++){ 
var svg1=svg.append("g"); 
addbar(xid,svg1);
}
//绘制柱状图
function addbar(xid,svg1) {
	
	var text = svg1.selectAll("text")
	.data(dataset[xid])			//绑定数据
	.enter()				//获取enter部分
	.append("text")			//添加text元素，使其与绑定数组的长度一致
	.attr("x", function (d, i) { return 40+xScale(xMarks[i]) + xColumnWidth.rangeBand() * xid; })
	.attr("y", function (d) {
		return h - yScale(d)-260;
	                })
	.attr("dy","1em")
	.text(function(d){
		return d;
	})
	   .attr("dx",xColumnWidth.rangeBand()/2)
	.attr("fill","black")
	.attr("font-size","10px")
	.attr("text-anchor","middle");	
	
svg1.selectAll("rect")
.data(dataset[xid])
.enter()
.append("rect")
.attr("width", xColumnWidth.rangeBand())
.attr("x", function (d, i) { return 40+xScale(xMarks[i]) + xColumnWidth.rangeBand() * xid; })
.attr("y", function (d) {
	return h - yScale(d)-240;
                })
//按比例尺绘制高度
.attr("height", function (d) { return Math.abs(yScale(d) - yScale(0)); })
.attr("fill",Color(xid))
.on("mouseover",function(d,i){
	d3.select(this)
	  .attr("fill","yellow");
})
.on("mouseout",function(d,i){
					d3.select(this)
					  .transition()
					  .duration(500)
					  .attr("fill",Color(xid));
				});

				}
				

yScale.range([280,0]);
//定义纵轴 
var yAxis = d3.svg.axis() 
.scale(yScale) 
.orient("left")
.ticks(10); 

//添加纵轴 
var yBar=svg.append("g") 
.attr("class", "axis") 
.attr("transform", "translate("+padding+",0)") 
.call(yAxis); 
//添加图例 
var legend=svg.append("g"); 
var legend1=svg.append("g"); 
var legend2=svg.append("g"); 
var legend3=svg.append("g"); 
var legend4=svg.append("g"); 
var legend5=svg.append("g"); 
var legend6=svg.append("g"); 
 
addLegend();
addLegend2();
addLegend3();
addLegend4();
addLegend5();
addLegend6();
addLegend7();

//添加图例 
function addLegend() 
{ 
	var lineNames1=[];
	for(var ii=0;ii<Math.min(2,lineNames.length);ii++){
		lineNames1.push(lineNames[ii]);
	}
 	  
legend.selectAll("text") 
.data(lineNames1) 
.enter() 
.append("text") 
.text(function(d){return d;}) 
.attr("class","legend") 
.attr("x", function(d,i) {return i*400+30;}) 
.attr("y",0) 
.style("font-size", "15px")
.attr("fill",function(d,i){ return Color(i);}); 
   	  
legend.selectAll("rect") 
.data(lineNames1) 
.enter() 
.append("rect") 
.attr("x", function(d,i) {return i*400+10;}) 
.attr("y",-10) 
.attr("width",8) 
.attr("height",8) 
.attr("fill",function(d,i){ return Color(i);}); 
 
legend.attr("transform","translate(40,"+(h-150)+")"); 
}function addLegend2() 
{
var lineNames2=[];
for(var ii=2;ii<Math.min(4,lineNames.length);ii++){
	lineNames2.push(lineNames[ii]);
}		

legend1.selectAll("text") 
.data(lineNames2) 
.enter() 
.append("text") 
.text(function(d){return d;}) 
.attr("class","legend") 
.attr("x", function(d,i) {return i*400+30;}) 
.attr("y",0) 
.style("font-size", "15px")
.attr("fill",function(d,i){ return Color(i+2);}); 
	  
legend1.selectAll("rect") 
.data(lineNames2) 
.enter() 
.append("rect") 
.attr("x", function(d,i) {return i*400+10;}) 
.attr("y",-10) 
.attr("width",8) 
.attr("height",8) 
.attr("fill",function(d,i){ return Color(i+2);}); 

legend1.attr("transform","translate(40,"+(h-130)+")");
}function addLegend3() 
{ 
var lineNames3=[];
for(var ii=4;ii<Math.min(6,lineNames.length);ii++){
	lineNames3.push(lineNames[ii]);
}
  
legend2.selectAll("text") 
.data(lineNames3) 
.enter() 
.append("text") 
.text(function(d){return d;}) 
.attr("class","legend") 
.attr("x", function(d,i) {return i*400+30;}) 
.attr("y",0) 
.style("font-size", "15px")
.attr("fill",function(d,i){ return Color(i+4);}); 
	  
legend2.selectAll("rect") 
.data(lineNames3) 
.enter() 
.append("rect") 
.attr("x", function(d,i) {return i*400+10;}) 
.attr("y",-10) 
.attr("width",8) 
.attr("height",8) 
.attr("fill",function(d,i){ return Color(i+4);}); 

legend2.attr("transform","translate(40,"+(h-110)+")"); 
}function addLegend4() 
{
var lineNames4=[];
for(var ii=6;ii<Math.min(8,lineNames.length);ii++){
lineNames4.push(lineNames[ii]);
}		

legend3.selectAll("text") 
.data(lineNames4) 
.enter() 
.append("text") 
.text(function(d){return d;}) 
.attr("class","legend") 
.attr("x", function(d,i) {return i*400+30;}) 
.attr("y",0) 
.style("font-size", "15px")
.attr("fill",function(d,i){ return Color(i+6);}); 
 
legend3.selectAll("rect") 
.data(lineNames4) 
.enter() 
.append("rect") 
.attr("x", function(d,i) {return i*400+10;}) 
.attr("y",-10) 
.attr("width",8) 
.attr("height",8) 
.attr("fill",function(d,i){ return Color(i+6);}); 

legend3.attr("transform","translate(40,"+(h-90)+")");
}function addLegend5() 
{ 
var lineNames5=[];
for(var ii=8;ii<Math.min(10,lineNames.length);ii++){
	lineNames5.push(lineNames[ii]);
}
  
legend4.selectAll("text") 
.data(lineNames5) 
.enter() 
.append("text") 
.text(function(d){return d;}) 
.attr("class","legend") 
.attr("x", function(d,i) {return i*400+30;}) 
.attr("y",0) 
.style("font-size", "15px")
.attr("fill",function(d,i){ return Color(i+8);}); 
	  
legend4.selectAll("rect") 
.data(lineNames5) 
.enter() 
.append("rect") 
.attr("x", function(d,i) {return i*400+10;}) 
.attr("y",-10) 
.attr("width",8) 
.attr("height",8) 
.attr("fill",function(d,i){ return Color(i+8);}); 

legend4.attr("transform","translate(40,"+(h-70)+")"); 
}function addLegend6() 
{
var lineNames6=[];
for(var ii=10;ii<Math.min(12,lineNames.length);ii++){
lineNames6.push(lineNames[ii]);
}		

legend5.selectAll("text") 
.data(lineNames6) 
.enter() 
.append("text") 
.text(function(d){return d;}) 
.attr("class","legend") 
.attr("x", function(d,i) {return i*400+30;}) 
.attr("y",0) 
.style("font-size", "15px")
.attr("fill",function(d,i){ return Color(i+10);}); 
 
legend5.selectAll("rect") 
.data(lineNames6) 
.enter() 
.append("rect") 
.attr("x", function(d,i) {return i*400+10;}) 
.attr("y",-10) 
.attr("width",8) 
.attr("height",8) 
.attr("fill",function(d,i){ return Color(i+10);}); 

legend5.attr("transform","translate(40,"+(h-50)+")");
}function addLegend7() 
{ 
var lineNames7=[];
for(var ii=12;ii<Math.min(14,lineNames.length);ii++){
	lineNames7.push(lineNames[ii]);
}
  
legend6.selectAll("text") 
.data(lineNames7) 
.enter() 
.append("text") 
.text(function(d){return d;}) 
.attr("class","legend") 
.attr("x", function(d,i) {return i*400+30;}) 
.attr("y",0) 
.style("font-size", "15px")
.attr("fill",function(d,i){ return Color(i+12);}); 
	  
legend6.selectAll("rect") 
.data(lineNames7) 
.enter() 
.append("rect") 
.attr("x", function(d,i) {return i*400+10;}) 
.attr("y",-10) 
.attr("width",8) 
.attr("height",8) 
.attr("fill",function(d,i){ return Color(i+12);}); 

legend6.attr("transform","translate(40,"+(h-30)+")"); 
}
 
//取得多维数组最值 
function getMaxdata(arr) 
{ 
var maxdata=0; 
for(i=0;i<arr.length;i++) 
{ 
maxdata=d3.max([maxdata,d3.max(arr[i])]); 
} 
return maxdata*1.2; 
}   
}
图例用了些笨办法，不过样子还不错
d3.js多系列柱状图

继续阅读

Js复制内容到剪贴板

浏览器js运行解析

layui时间选择框，选择时间段

实现计算器功能

js高级学习笔记（b站尚硅谷）-3-对象

2018年不想被web前端开发淘汰，你需要掌握哪些技术？

js 日期格式化以及获取某天的零点和23:59

Angularjs的$http方法的success和then的区别

jquery,ajax,jsonp例子+springmvc后台

attachEvent 与addEventListener 区别

用JS模拟实现二叉树(含遍历)

关于 underscore 中模板引擎的应用示例

【JavaScript语法】函数对象的浅拷贝、深拷贝

JS--运算符

数组和类数组

jquery_126_demo
