利用d3.js绘制柱状图demo

D3.js柱状图Demo

最新推荐文章于 2024-09-26 07:48:16 发布

原创

最新推荐文章于 2024-09-26 07:48:16 发布 · 3.8k 阅读

5 ·

CC 4.0 BY-SA版权

这个不太难，就随手写了个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.画布svg
	var 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");