d3.js水平横向柱状图表

骑猪看日落 2022-04-18 02:35 286阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" type="text/css"/>
    </head>
    <body>
    	<div id="container"></div>
    	
    	<script src="http://d3js.org/d3.v3.js" type="text/javascript"></script>
    	<script src="js/index.js" type="text/javascript"></script>
    </body>
    </html>

index.js

var data = [1,4,7,2,9,13,5,8,2,9],
    bar_height = 50,
    bar_padding = 10,
    svg_height = (bar_height + bar_padding)*data.length,
    svg_width=500;
    
    var scale = d3.scale.linear()
    .domain([0,d3.max(data)])
    .range([0,svg_width]);
    
    var svg = d3.select("#container")
    .append("svg")
    .attr("width",svg_width)
    .attr("height",svg_height)
    
    var bar = svg.selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .attr("transform",function(d,i){return "translate(0,"+ i*(bar_height+bar_padding) +")";})
    
    bar.append("rect")
    .attr({
    	"width":function(d){return scale(d);},
    	"height":bar_height
    })
    .style("fill","steelblue")
    
    bar.append("text")
    .text(function(d){return d;})
    .attr({
    	"x":function(d){return scale(d);},
    	"y":bar_height/2,
    	"text-anchor":"end"
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: /images/20220418/84ff2149c09d45a795446d1937b9c82a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，286人围观）

还没有评论，来说两句吧...

相关阅读

相关 python绘制横向水平柱状条形图Bar

python绘制横向水平柱状条形图Bar import matplotlib import random import matplotlib.py

ゝ一世哀愁。/ 2024年02月19日 18:51/ 0 赞/ 77 阅读

相关 d3+js横向图

<!doctype html> <html> <head> <meta charset="utf-8"> <!

素颜马尾好姑娘i/ 2022年11月26日 01:44/ 0 赞/ 214 阅读

相关 Echarts-横向柱状图实现

╰半橙微兮°/ 2022年11月06日 14:52/ 0 赞/ 272 阅读

相关 Amchart 3D横向柱形图

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

阳光穿透心脏的1/2处/ 2022年05月31日 08:21/ 0 赞/ 241 阅读

相关利用js生成3D柱状图

1.引用js文件 <script src="${pageContext.request.contextPath }/js/highcharts.js"></scrip

拼搏现实的明天。/ 2022年05月17日 07:36/ 0 赞/ 231 阅读

相关 d3.js实现竖直柱状图表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm

蔚落/ 2022年04月18日 02:39/ 0 赞/ 212 阅读

相关 d3.js水平横向柱状图表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm

骑猪看日落/ 2022年04月18日 02:35/ 0 赞/ 287 阅读

相关 D3 二维图表的绘制系列（五）横向柱状图

上一篇：堆叠柱状图 https://blog.csdn.net/zjw\_python/article/details/98207916 下一篇：基础折线图 https:

た入场券/ 2021年11月10日 09:36/ 0 赞/ 485 阅读

相关 D3 二维图表的绘制系列（二）基础柱状图

下一篇：多列柱状图 https://blog.csdn.net/zjw\_python/article/details/98205614 代码结构和初始化画布的Chart对

客官°小女子只卖身不卖艺/ 2021年11月10日 08:30/ 0 赞/ 447 阅读

相关 ECharts之横向百分比柱状图

效果图 ![在这里插入图片描述][20191015094349429.gif] 背景图片 ![20190725170845879.png][] 下载EChar

古城微笑少年丶/ 2021年08月13日 12:40/ 0 赞/ 1390 阅读