一、页面引用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>柱状图</title>
</head>
<body>
<div id="container-single"></div>
<div id="container-more"></div>
<div id="container-stack-up"></div>
<script src="../lib/d3-5.9.7.min.js"></script>
<script src="../js/histogram.js"></script>
</body>
</html>
二、多柱体柱状图绘制
//多柱体柱状图
function moreHistogram() {
let svgAttr = {width:1000,height:500};
let marge = {top:60,bottom:60,left:60,right:60};
let sales_volume_watermelon = [10,13,15,18,22,37,40,35,27,18,16,15];
let sales_volume_orange = [20,35,18,16,13,12,9,11,19,27,30,26];
let monthes = ['一月', '二月', '三月', '四月', '五月