用D3在直角坐标系画柱形图

最新推荐文章于 2022-10-27 21:24:53 发布

aquscjl8130

最新推荐文章于 2022-10-27 21:24:53 发布

阅读量202

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/MsHibiscus/p/9223094.html

版权

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 <title></title>
 <script src="js/d3.js"></script>
 <style>
 svg{
background-color: aqua;
 }
 </style>
 <script src="d3.js"></script>  //引入d3.js，按照实际的路径
 <script src="jquery-1.11.3.js"></script> //引入jquery，按照实际路径
</head>
<body>
<div style="position: absolute;width: 100%;height: 100%">
 <div id=tu1 style="width: 48%;height: 100%;float: left;"></div>
 <div id=tu2 style="width: 48%;height: 100%;float: left;"></div>
</div>
</body>
</html>


//d3部分：

<script>
//定义数据
    var dataset=[100,200,300,180,240,500,230]
var xdata1=['周一','周二','周三','周四','周五','周六','周日']
var xdata2=['班级A','班级B','班级C','班级D',]
var ydata2=[1000,2000,3000,1400]
function drawbar(divname,xdata,ydata,bool) {
//1.定义svg宽及高
 var svgwidth = $("#"+divname).width();
var svgheight = $("#"+divname).height();
//2.生成svg
 var _svg = d3.select("#"+divname)
 .append("svg")
 .attr("width", svgwidth)
 .attr("height", svgheight);
//3.定义绘图区与svg四边边距
 var margin = {"top": 0, "right": 0, "bottom": 50, "left": 50};
//4.定义绘图区，存放到g组中
 var gdraw1 = _svg.append("g")
 .attr("id", "gdraw1")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//5.定义标题高度
 var titleheight = 50;
//6.定义核心绘图区
 var gdraw2 = gdraw1.append("g")
 .attr("id", "gdraw2")
 .attr("transform", "translate(0," + titleheight + ")");
//7.定义图与核心区之间的四边边距
 var charmargin = {"top": 0, "right": 0, "bottom": 30, "left": 30};
//8.计算出主区域的宽和高
 var mainwidth = svgwidth - margin.left - margin.right;
var mainheight = svgheight - margin.bottom - margin.top - titleheight;
//9.计算X轴和Y轴的宽及高
 var xaxiswidth = mainwidth - charmargin.left - charmargin.right;
var yaxisheight = mainheight - charmargin.top - charmargin.bottom;
//10.定义存放x轴g组和存入y轴g组
 //a.x轴
 var gxaxis = gdraw2.append("g") 
 .attr("id", "gxaxis") 
 .attr("transform", "translate(0," + (yaxisheight + charmargin.top) + ")"); 
 var scaleband = d3.scaleBand() 
 .domain(xdata) 
 .range([0, xaxiswidth]) 
 .padding(0.2); 
 var xaxis = d3.axisBottom() 
 .scale(scaleband); 
 xaxis(gxaxis); 
 //b.y轴 
 var gyaxis = gdraw2.append("g") 
 .attr("id", "gyaxis") 
 .attr("transform", "translate(0," + charmargin.top + ")"); 
 var scaleline = d3.scaleLinear() 
 .domain([0, d3.max(ydata)]) 
 .range([yaxisheight, 0]); 
 var yaxis = d3.axisLeft() 
 .scale(scaleline); 
 yaxis(gyaxis); 
 //画柱形图 
 //颜色 
 var color = d3.scaleOrdinal() 
 .domain(d3.range(ydata.length)) 
 .range(d3.schemeCategory10); 
 //添加G组 
 var gbar = gdraw2.append("g") 
 .attr("id", "gbar") 
 .attr("transform", "translate(0," + charmargin.top + ")") 
 gbar.selectAll("rect") 
 .data(ydata) 
 .ener() 
 .append("rect") 
 .attr("x", function (d, i) { return scaleband(xdata[i]) }) 
 .attr("y",function(d,i){