d3实现堆叠柱状图图表效果代码-html代码-BFW代码库

d3实现堆叠柱状图图表效果代码

代码语言：html

所属分类：图表

代码描述：d3实现堆叠柱状图图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	background: hsl(0, 0%, 97%);
	color: hsl(0, 0%, 7%);
	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
		helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
}

#root {
	max-width: 52rem;
	margin: 1rem auto;
	padding: 1rem;
}

#root > * + * {
	margin-top: 0.75em;
}

h1 {
	font-size: 1.43rem;
}

.chart {
	display: block;
}

.chart .axis-y path {
	opacity: 0;
}

.chart .axis-y text {
	color: hsl(0, 0%, 25%);
	font-size: 0.8rem;
	font-weight: 700;
}

.chart .axis-x path {
	color: hsl(0, 0%, 57%);
}

.chart .axis-x text {
	color: hsl(0, 0%, 37%);
	font-size: 0.6rem;
	font-weight: 700;
}

form {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 0.5rem;
}

label {
	color: hsl(0, 0%, 25%);
	cursor: pointer;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0 0.5rem;
}

label input {
	width: 1em;
	height: 1em;
	opacity: 0;
}

label svg {
	display: block;
	width: 1em;
	height: 1em;
	top: 0;
	right: 0;
	position: absolute;
}
</style>



</head>

<body >
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.7.7.0.js"></script>
      <.........完整代码请登录后点击上方下载按钮下载查看