使用D3绘制图表(6)--竖直柱状图表
竖直柱状图的绘制是在水平柱状图的基础上修改的。
1.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript" src="js/d3.js" ></script>
<script type="text/javascript" src="js/shuzhuangtu.js" ></script>
</html>
2.js代码
var data = [1,3,4,6,2,9,7,3,8],
bar_width = 50,
bar_padding = 10,
svg_height = 500,
svg_width = (bar_width +bar_padding)*data.length; var scale = d3.scale.linear()
.domain([0, d3.max(data)])
.range([svg_height, 0]); 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("+i*(bar_width+bar_padding)+", 0)"}) bar.append("rect")
.attr({
"y":function(d){return scale(d);},
"width":bar_width,
"height":function(d){return svg_height-scale(d);}
})
.style("fill","cornflowerblue") bar.append("text")
.text(function(d){return d;})
.attr({
"y":function(d){return scale(d)},
"x":bar_width/2,
"dy":15,
"text-anchor":"middle"
})
3.运行效果
使用D3绘制图表(6)--竖直柱状图表的更多相关文章
- 使用D3绘制图表(7)--饼状图
这次是绘制饼状图,也是这一次使用D3绘制图表的最后一篇,大家可以从其他地方深入学习D3绘制图表,也可以直接查看D3的API进行学习,本次绘制饼状图的数据跟之前的卸载数组里面的不一样,这一次是使用d3的 ...
- 使用D3绘制图表(2)--绘制曲线
上一篇是使用D3绘制画布,这一篇的内容是在画布上绘制曲线. 1.之前的html代码没有变化,但是我还是贴出来 <!DOCTYPE html> <html> <head&g ...
- 用Jfree实现条形柱状图表,java代码实现
用Jfree实现条形柱状图表,java代码实现.可经经常使用于报表的制作,代码自己主动生成后能够自由查看.能够自由配置图表的各个属性,用来达到自己的要求和目的 package test1; impor ...
- 网页图表Highcharts实践教程之图表代码构成
网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...
- 网页图表Highcharts实践教程之图表区
网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将 ...
- Excel催化剂图表系列之一整套IBCS图表大放送,一秒变图表专家
不知不觉,从2019年1月初开始打算来一波图表系列的功能,首选IBCS标准化图表,结果入坑后,一路跌至谷底,和预想的完全不是一个量级的工作量,为了追求一键式.通用化及细节的严谨性,过程中好几次文件报错 ...
- 使用D3绘制图表(5)--水平柱状图表
绘制水平柱状图表的方法也不是很难,首先在svg中插入g,然后在g中插入rect. 1.html代码 <!DOCTYPE html> <html> <head> &l ...
- 使用D3绘制图表(4)--面积图表
面积图表的绘制就是在曲线图表的基础上做一点小小的改动.其他的代码跟绘制曲线图表没有什么区别,下面有黄色背景颜色的代码就是修改的,是不是很简单,第一句修改的地方就是把之前绘制线的函数(line)改成了绘 ...
- 使用D3绘制图表(3)--添加坐标轴和文本标签
上一篇是曲线的绘制,这样仅仅只是有一条线,完全先是不出数据想要表现的内容,于是我们要添加坐标系,添加坐标系和画线类似. 1.还是没有变化的html页面 <!DOCTYPE html> &l ...
随机推荐
- [转]在EntityFramework6中执行SQL语句
本文转自:http://www.cnblogs.com/wujingtao/p/5412329.html 在上一节中我介绍了如何使用EF6对数据库实现CRDU以及事务,我们没有写一句SQL就完成了所有 ...
- 在Solr中配置和使用ansj分词
在上一节[编译Ansj之Solr插件]中介绍如何编译ansj分词在solr(lucene)环境中使用的接口,本章将介绍如何在solr中使用ansj,其步骤主要包括:下载或者编译ansj和nlp-lan ...
- jQuery UI常用插件使用
一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...
- 以Access为支撑,书写一个C#写入记录的案例
/// <summary> /// 读取Excel文档 /// </summary> /// <param name="Path">文件名称&l ...
- 嵌入式Linux驱动学习之路(二)u-boot体验
u-boot工程简介 现在的u-boot支持PowerPC.ARM.X86.MIPS体系结构的上百种开发板,已经称为功能最多.灵活性最强,并且开发最积极的开源Bootloader.目前由DENX的Wo ...
- SQL 2008 windows登录失败,错误18456, 更正
可能的原因:密码有效性验证失败.该密码太短,不符合 Windows 策略要求. 本地设置可能被域设置覆盖.而域设置中指定了安全策略,密码必须有一定的复杂性.重新更改sa密码. 第一步.以windows ...
- [No000053]我25岁了,是应该继续挣钱,还是选择自己的爱好?--正好庆祝自己25岁生日
你所问的问题正是问题所在.停止做出重大决策,专注于缩小你想到达的地位与你之间的差距. 成功的生活并非由简单而鲜明的决定组成,它们更像这幅图: 但悲伤的是,太多人的状态类似于这幅图: 我知道这听上去很显 ...
- Android中一张图片加载后所占用内存大小的获取与测试
Android程序中一旦加载的图片比较多,就有可能出现Out of Memory而导致程序崩溃.这个一方面是因为Android系统本身对于每个单独的进程有内存大小的限制(有16M,64M,128M,2 ...
- iOS 使用证书时遇到的错误一
证书概念: 那么现在就牵扯到几个名词,Development证书,aps_Development证书(推送证书),测试描述文件,AppID,同理也就有Distribution证书,aps_Distri ...
- http协议(二)请求和响应报文的构成
http协议用于客户端和服务器之间的通信,请求访问资源的一方称为客户端,而提供资源响应的一方称为服务器端. 下面就是客户端和服务端之间简单的通信过程 PS:请求必须从客户端建立通信,服务端没收到请求之 ...