d3.js水平横向柱状图表

最新推荐文章于 2023-05-09 00:42:06 发布
最新推荐文章于 2023-05-09 00:42:06 发布
阅读量3.1k 收藏 3
点赞数
分类专栏： 数据处理 文章标签： d3.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyphf/article/details/83821520
版权

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"
})

 

xyphf_和派孔明
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用D3.js实现最简单的柱状图示例代码
10-20
在本文中，我们将深入探讨如何使用D3.js创建一个简单的柱状图。D3.js（Data-Driven Documents）是一个强大的JavaScript库，它允许开发者通过HTML、SVG和CSS将数据绑定到DOM（文档对象模型），并根据数据驱动文档的...
横向柱状图（标签图片展示）
LBY_XK的博客
12-14 1338
效果图 HTML代码 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
数据可视化【highchart】——横向柱状图
做技术，坚持才是最重要的，一时的热情只是暂时的进步
07-10 877
基本案例 基于案例修改后效果图如下： 代码：
echarts常见图形-横向柱状图(六)
qq_43167748的博客
01-13 2241
横向柱状图-不同颜色，自动轮播1.最终效果图2.echarts文件(jgjcssl.js)3.vue文件中3.1 html3.2 js逻辑处理(引入jgjcssl.js) 1.最终效果图 2.echarts文件(jgjcssl.js) export const jgjcsslOption = (colorList, dataNames, dataValue, timer) => { // let dataValue = [100, 200, 300, 500, 600, 700, 900, 13
d3.js画柱状图超详细教程
qq5q13638的博客
11-27 4885
d3.js画柱状图超详细教程 废话不说了，有文本编辑器和浏览器就行。 先看效果图 1. 本地创建一个文件夹，名字随便 2. 如何创建一个用于画d3的空白html？ 在文件夹中新建文本文件，将后缀改为.html <!doctype html> <html> <head> <title>D3.js基础教程</title> <script src="https://d3js.org/d3.v5.min.js" charset=
div+css+js实现渐变色根据按百分比显示的横向柱状图
qq_42112979的博客
09-04 2172
div+css+js实现渐变色根据按百分比显示的横向柱状图 echarts完成不了我的需求，尝试用最原始的方法画一个横向渐变色柱状图 一起加油 文章目录div+css+js实现渐变色根据按百分比显示的横向柱状图前言一、目标展示？二、代码1.js2.html总结 前言 echarts完成不了我的需求，尝试用最原始的方法画一个横向渐变色柱状图 提示：以下是本篇文章正文内容，下面案例可供参考 一、目标展示？ 没错，又是这张图，可以看到用echarts的话左边图片不好对其而且鼠标悬浮背景色的柱子会出现前面
CSS 柱状图实现代码其实很简单
09-25
在网页设计中，柱状图是一种常见的数据可视化工具，用于直观地展示数据的比例或比较。在本文中，我们将探讨如何使用纯CSS来实现一个...对于更复杂的需求，可以结合JavaScript库如D3.js或Chart.js来增强功能和交互性。
详解柱状图（可运行）
06-17
在编程和数据分析领域，创建柱状图的工具和库很多，如Python的Matplotlib、Seaborn和Plotly，JavaScript的D3.js和Chart.js等。通过这些工具，我们可以自定义颜色、样式、动画效果等，使柱状图更具吸引力和实用性。 ...
图表
02-24
4. D3.js：JavaScript 库，允许开发者创建高度自定义和交互式的图表。 5. Python 的 Matplotlib 和 Seaborn 库：用于科学计算和数据可视化的编程库，适合程序员和数据分析师。 6. R语言的ggplot2：基于Grammar of ...
HTML5柱形条形折线数据统计图代码.zip
07-04
通过这个元素，我们可以利用JavaScript库如Chart.js、D3.js或Highcharts来创建交互式的数据图表，包括柱状图、条形图和折线图。 在这个压缩包中，"RFM"可能是一个包含实现这些图形的JavaScript文件或者一个示例数据...
横向柱状图
03-14
Horizontalhistogram.zip 横向柱状图
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变数值文本，涉及点击事件，功能齐全的易于使用；
纯js原生-响应式柱状图表
01-08
纯js原生-响应式柱状图表 纯js原生-响应式柱状图表 纯js原生-响应式柱状图表
图形化开发（四）01-D3.js之实践——做一个简单的柱状图
weixin_44867717的博客
09-22 395
图形化开发（四）01-D3.js之实践——做一个简单的柱状图 做一个简单的柱状图 画布 前几章的处理对象都是 HTML 的文字，没有涉及图形的制作。 要绘图，首要需要的是一块绘图的“画布”。 HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。 添加画布 D3 虽然没有明文规定一定要在 SVG 中绘图，但是 D3 提供了众多的 SVG 图形的生成器，它们都是只支持 SVG 的。因此，建议使用 SVG 画布。 使用 D3 在 body 元素中添加 svg 的代码如下。 var width =
HTML5 + JavaScript绘柱状图
Purpleendurer@CSDN
05-09 1813
之前用HTML5 + JavaScript绘柱状图，可以直观显示各类型产品或品牌的所占比例大小。为了简便便起见，我们默认标题颜色为黑色，字体为微软雅黑，所以这里没有标题的颜色和字体属性。接着我们与绘制饼图时定义一个饼图对象相类似的，定义一个柱状图对象BarChart。现在需要针对每年获得各类品牌数据进行对比，绘制柱状图会更直观。在初始化方法中，我们可以定义对象内部的一些属性。在柱状图对象BarChart内部有几个方法。第一个是初始化方法init。
D3 二维图表的绘制系列（五）横向柱状图
zjw_python的博客
02-20 3065
上一篇： 堆叠柱状图 https://blog.csdn.net/zjw_python/article/details/98207916 下一篇： 基础折线图 https://blog.csdn.net/zjw_python/article/details/98201470 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/arti...
d3实现横向柱状图数据展示（V4）
木雷双雄7
09-11 2350
一、最终实现效果 二、实现步骤 1、在现有的id为chart的div中添加一个长宽都是300的SVG元素 var svg = d3.select('#chart') .append('svg') .attr('width','300') .attr('height','300') 2、在绘制矩形之前，我们给出一组数据[ 0.5 , 2 , 1 , 1.3 , 0.9]，由
D3横向柱状图
qq_41396074的博客
04-27 289
初识d3横向柱状图
echart柱状图横向_柱状图 | ECharts 数据可视化实验室
weixin_35636570的博客
02-06 1781
介绍柱状图是最常见的图表类型，通过使用水平或垂直方向柱子的高度来显示不同类别的数值，其中柱状图的一个轴显示正在比较的类别，而另一个轴代表对应的刻度值。适合的数据类型A18B30C12D20纵向柱状图的柱是垂直方向的，横向柱状图的柱是水平方向的，又称条形图。条形图与横向柱状图表达数据的形式是一样的，不过，当图表的数据标签很长或者有超过10个项目进行比较时，横向柱状图会无法完全显示完标签，或者只能倾斜...
d3.js绘制对比柱状图
最新发布
05-12
对比柱状图可以使用d3.js中的矩形图（rect）元素来绘制。以下是一个简单的例子： HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3.js对比柱状图</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <svg id="chart" width="400" height="300"></svg> <script src="script.js"></script> </body> </html> ``` JavaScript代码： ```javascript // 数据 var data = [ {name: 'A', value: 20}, {name: 'B', value: 35}, {name: 'C', value: 10}, {name: 'D', value: 15}, {name: 'E', value: 25} ]; // 定义svg画布大小 var width = 400; var height = 300; // 定义比例尺 var xScale = d3.scaleBand() .domain(data.map(function(d) { return d.name; })) .range([0, width]) .padding(0.1); var yScale = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return d.value; })]) .range([height, 0]); // 创建svg元素 var svg = d3.select('#chart') .append('g') .attr('transform', 'translate(' + 50 + ',' + 10 + ')'); // 绘制矩形 svg.selectAll('rect') .data(data) .enter() .append('rect') .attr('x', function(d) { return xScale(d.name); }) .attr('y', function(d) { return yScale(d.value); }) .attr('width', xScale.bandwidth()) .attr('height', function(d) { return height - yScale(d.value); }) .style('fill', 'steelblue'); ``` 解释： 1. 定义数据，包含每个柱子的名称和值。 2. 定义画布大小。 3. 定义x轴和y轴的比例尺，x轴比例尺使用`scaleBand`，y轴比例尺使用`scaleLinear`。 4. 创建svg元素，并将其偏移50像素到右侧和10像素到下方。 5. 绘制矩形，使用`selectAll`和`data`方法绑定数据，使用`enter`方法进入数据，使用`append`方法添加矩形元素，使用`attr`方法设置x、y、width和height属性，使用`style`方法设置颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值