d3.js多系列柱状图

最新推荐文章于 2022-09-25 13:57:16 发布

handsome_happy

最新推荐文章于 2022-09-25 13:57:16 发布

阅读量2.2k

点赞数

分类专栏：数据可视化 js 文章标签： d3.js

本文链接：https://blog.csdn.net/qq_32201847/article/details/52183035

版权

本文介绍如何利用d3.js库绘制多系列的柱状图，虽然图例实现过程较为繁琐，但最终展示效果理想。

摘要由CSDN通过智能技术生成

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&