利用d3.js绘制柱状图demo

波比小金刚

于 2016-07-05 13:19:50 发布

阅读量3.7k

点赞数 3

分类专栏： javascript

本文链接：https://blog.csdn.net/javaexploreroooo/article/details/51830722

版权

这个不太难，就随手写了个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.bot