D3js-堆栈图

最新推荐文章于 2024-08-21 11:22:51 发布

六月心悸

最新推荐文章于 2024-08-21 11:22:51 发布

阅读量3.4k

点赞数

分类专栏：数据可视化（Echarts&D3js）文章标签： D3js 堆栈图 stack

本文链接：https://blog.csdn.net/u013147600/article/details/46770415

版权

本文介绍了如何使用D3.js库创建堆栈图。通过示例代码展示了堆栈图的实现过程，并详细解释了每个柱状体的y和y0坐标值的含义，帮助理解数据在图形中的表示方式。

摘要由CSDN通过智能技术生成

效果图：

源代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>D3 -堆栈图</title>
	<style type="text/css">
	.axis path,
	.axis line{
	fill: none;
	stroke: black;
	 shape-rendering: crispEdges;
	 
}
.axis text {
	font-family: sans-serif;
	font-size: 14px;
	font-weight: bold;
}
	</style>
  </head>
  
  <body>
  	<script type="text/javascript" src="js/d3/d3.js"></script>
	<script type="text/javascript" src="js/d3/d3.min.js"></script>
   <script type="text/javascript">
   		
   		var width = 750;
   		var height = 500;
   		var padding ={left:80 ,top:50,right:100,bottom:30};
   		
   		var svg = d3.select("body").append("svg")
   								   .attr("width",width)
   								   .at