利用d3.js绘制柱状图demo

来源：互联网发布：淘宝网官网登陆编辑：程序博客网时间：2024/05/16 15:43
这个不太难，就随手写了个demo.
<!DOCTYPE html><html><head><title>完整柱状图demo</title><meta charset="utf-8"><script type="text/javascript" src="js/d3.js"></script><script type="text/javascript" src="js/d3.min.js"></script></head><body><script type="text/javascript">//1.画布svgvar width=400;var height=400;//画布大小var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);//添加画布//画布周边留白var padding={left:30,right:30,top:20,bottom:20};//定义数据var dataset=[10,20,30,50,45,60,18];//x轴比列尺var xScale=d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0,width-padding.left-padding.right]);//y轴比例尺var yScale=d3.scale.linear().domain([0,d3.max(dataset)]).range([height-padding.top-padding.bottom,0]);//x坐标轴var xAxis=d3.svg.axis().scale(xScale).orient("bottom");//y坐标轴var yAxis=d3.svg.axis().scale(yScale).orient("left");//添加矩形元素var rects=svg.selectAll(".myRect").data(dataset).enter().append("rect").attr("class","myRect").attr("transform","translate("+padding.left+","+padding.top+")").attr("x",function(d,i){return xScale(i)+2;}).attr("y",function(d,i){return yScale(d);}).attr("width",function(d,i){return xScale.rangeBand()-2;}).attr("height",function(d,i){return height-padding.top-padding.bottom-yScale(d);}).attr("fill","steelblue");//添加文字元素var texts=svg.selectAll(".myText").data(dataset).enter().append("text").attr("class","myText").attr("transform","translate("+padding.left+","+padding.top+")").attr("x",function(d,i){return xScale(i)+2;}).attr("y",function(d,i){return yScale(d);}).attr("width",function(d,i){return (xScale.rangeBand() - 4)/2;}).attr("height",function(d,i){return 20;}).text(function(d){return d;})//添加坐标轴//1.xsvg.append("g").attr("class","axis").attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")").call(xAxis);//2.ysvg.append("g").attr("class","axis").attr("transform","translate(" + padding.left + "," +padding.top + ")").call(yAxis);</script></body></html>
效果自己试试
0 0