用d3绘制的svg柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>HTML5 SVG多折线图表DEMO演示</title>
</head>
<body>
<script src="js/d3.v3.min.js"></script>
<script>
var data = Array.apply(0, Array(100)).map(function() {
return Math.random() * 100;
});
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = document.body.clientWidth - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var chart = d3.select('body')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
// 计算每根柱状物体的宽度
var barWidth = width / data.length;
// 用g作每根柱状物体的容器，意义可类比div
// 前一篇文章已经介绍过selectAll的意义，即生成占位符，等待填充svg图形
var bar = chart.selectAll('g')
.data(data)
.enter()
.append('g')
// 接收一个数据填充一个g元素
// 同时为g设置位置
.attr('transform', function(d, i) {
return 'translate(' + i * barWidth + ', 0)';
});
bar.append('rect')
// 添加一个矩形
.attr('y', function(d) {
return height - d;
})
.attr('height', function(d) {
return d;
})
.attr('width', barWidth - 1)
.attr('fill','blue');
var x = d3.time.scale()
.domain(d3.extent(data, function(d) { return d.day; }))
.range([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(data)])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(1);
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
// 添加x坐标轴
chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
// 添加y坐标轴
chart.append('g')
.attr('class', 'y axis')
.call(yAxis);
</script>
</body>
</html>
摘自 http://www.alloyteam.com/2014/02/d3-bar-chart/
d3中的API链接地址：http://www.aspku.com/kaifa/javascript/47217.html
已写明摘要，感谢各位大神的分享！谢谢！
浙公网安备 33010602011771号