html 面积图https://bl.ocks.org/eightHundreds/c3cf924950b2f80a2eeaed765a8d9027

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 面积图https://bl.ocks.org/eightHundreds/c3cf924950b2f80a2eeaed765a8d9027相关的知识，希望对你有一定的参考价值。

#container{
	background:#ddd;
	width: 500px;
	height: 250px;
	font-family: arial;
}
#container path{
	stroke: #111;
	fill: none;
}
#container g .axislabel{
	fill: black;
	font-size: 1.5em;
	text-anchor: end;
}


function areaGraph(){
	var svgArea={width:500,height:250};
	var margin={left:50,top:30,right:20,bottom:20}
	,gArea={width:svgArea.width-margin.left-margin.right,height:svgArea.height-margin.top-margin.bottom};
	
	var data=[1,3,5,7,8,4,3,7];
	
	var svg=d3.select('#container')
	.append('svg')
	.attr('width',svgArea.width)
	.attr('height',svgArea.height)
	
	
	var g_area=svg.append('g')
	.attr('transform',"translate("+margin.left+","+margin.top+")");
	
	//数据映射器
	var scale_x=d3.scaleLinear().domain([0,data.length-1]).range([0,gArea.width])//x(function(d,i){return i})
	var scale_y=d3.scaleLinear().domain([0,d3.max(data)]).range([gArea.height,0])
	  
	//直线数据生成器
	var area_generate=d3.area()
	.x(function(d,i){return scale_x(i);})
	.y1(function(d,i){return scale_y(d);})
	.y0(gArea.height)//*新增一条线
	.curve(d3.curveCardinal)
	
	
	
	g_area.append('path').attr('d',area_generate(data))
	.style('fill','steelblue')//*添加填充样式
	
	//坐标轴描述
	var axis_x=d3.axisBottom(scale_x)
	var axis_y=d3.axisLeft(scale_y)
	
	//坐标轴插入
	var g_axis_x=g_area.append('g').call(axis_x)
	.attr('transform',"translate(0,"+gArea.height+")")
	var g_axis_y=g_area.append('g').call(axis_y)
	g_axis_y.append('text').text('y轴')
	.attr('class','axislabel')
	.attr('transform',"rotate(-90)")
	.attr('dy','1em')
}
window.onload=function(){
	areaGraph()
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div id="container">

		</div>
	</body>
	<script src="https://cdn.bootcss.com/d3/4.4.3/d3.min.js"></script>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
</html>

以上是关于html 面积图https://bl.ocks.org/eightHundreds/c3cf924950b2f80a2eeaed765a8d9027的主要内容，如果未能解决你的问题，请参考以下文章

R语言ggplot2可视化面积图（Area Chart）通过给坐标轴和曲线之间的区域着色可视化面积图添加标题副标题题注信息

echarts的示例一：柱状（条形）图折线（面积）图

D3 折线图显示为面积图

d3 绘制面积图

84. Largest Rectangle in Histogram *HARD* 柱状图求最大面积 85. Maximal Rectangle *HARD*

如何用SVG制作面积图（没有JS）