竖直柱状图的绘制是在水平柱状图的基础上修改的。

　　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）--竖直柱状图表的更多相关文章

  1. 使用D3绘制图表（7）--饼状图

    这次是绘制饼状图,也是这一次使用D3绘制图表的最后一篇,大家可以从其他地方深入学习D3绘制图表,也可以直接查看D3的API进行学习,本次绘制饼状图的数据跟之前的卸载数组里面的不一样,这一次是使用d3的 ...

  2. 使用D3绘制图表（2）--绘制曲线

    上一篇是使用D3绘制画布,这一篇的内容是在画布上绘制曲线. 1.之前的html代码没有变化,但是我还是贴出来 <!DOCTYPE html> <html> <head&g ...

  3. 用Jfree实现条形柱状图表，java代码实现

    用Jfree实现条形柱状图表,java代码实现.可经经常使用于报表的制作,代码自己主动生成后能够自由查看.能够自由配置图表的各个属性,用来达到自己的要求和目的 package test1; impor ...

  4. 网页图表Highcharts实践教程之图表代码构成

    网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...

  5. 网页图表Highcharts实践教程之图表区

    网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将 ...

  6. Excel催化剂图表系列之一整套IBCS图表大放送，一秒变图表专家

    不知不觉,从2019年1月初开始打算来一波图表系列的功能,首选IBCS标准化图表,结果入坑后,一路跌至谷底,和预想的完全不是一个量级的工作量,为了追求一键式.通用化及细节的严谨性,过程中好几次文件报错 ...

  7. 使用D3绘制图表（5）--水平柱状图表

    绘制水平柱状图表的方法也不是很难,首先在svg中插入g,然后在g中插入rect. 1.html代码 <!DOCTYPE html> <html> <head> &l ...

  8. 使用D3绘制图表（4）--面积图表

    面积图表的绘制就是在曲线图表的基础上做一点小小的改动.其他的代码跟绘制曲线图表没有什么区别,下面有黄色背景颜色的代码就是修改的,是不是很简单,第一句修改的地方就是把之前绘制线的函数(line)改成了绘 ...

  9. 使用D3绘制图表（3）--添加坐标轴和文本标签

    上一篇是曲线的绘制,这样仅仅只是有一条线,完全先是不出数据想要表现的内容,于是我们要添加坐标系,添加坐标系和画线类似. 1.还是没有变化的html页面 <!DOCTYPE html> &l ...

随机推荐

  1. 汽车4S店经验指标完成情况报表制作分享

    集团公司一般为了加强下属的经营管理,以及项经营指标完情况,需要制定一些报表.我们平时也经常遇到这种情况,而这些报表要包括什么内容呢?该怎么制作呢?用什么制作呢?今天小编就以4s店为例,分享给大家一个报 ...

  2. css3中变形与动画（三）

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  3. C#基础---IComparable用法，实现List<T>.sort()排序

    List<T>.sort()可以实现对T的排序,比如List<int>.sort()执行后集合会按照int从小到大排序.如果T是一个自定义的Object,可是我们想按照自己的方 ...

  4. 第9章 用内核对象进行线程同步（4）_死锁(DeadLock）及其他

    9.7 线程同步对象速查表 对象 何时处于未触发状态 何时处于触发状态 成功等待的副作用 进程 进程仍在运行的时候 进程终止的时(ExitProcess.TerminateProcess) 没有 线程 ...

  5. Svn Patch 中文乱码

    关于Patch svn打patch的介绍:巧用svn create patch(打补丁)方案解决定制版需求 svn创建patch 1.在SVN的提交列表中,右键选择“创建补丁” 2.选择保存位置,保存 ...

  6. 理解Java中字符流与字节流的区别

    1. 什么是流 Java中的流是对字节序列的抽象,我们可以想象有一个水管,只不过现在流动在水管中的不再是水,而是字节序列.和水流一样,Java中的流也具有一个“流动的方向”,通常可以从中读入一个字节序 ...

  7. net面试 ASP.NET页面传值的各种方法和分析 （copy)

    Web页面是无状态的, 服务器对每一次请求都认为来自不同用户,因此,变量的状态在连续对同一页面的多次请求之间或在页面跳转时不会被保留.在用ASP.NET 设计开发一个Web系统时, 遇到一个重要的问题 ...

  8. 利用统计学知识为android应用的启动时间做数据分析

    [声明:如需转载本文,请注明来源] 一.数据说明 启动时间用同一台设备,同一个包进行启动时间的测试,其中三组样本数据(每组100份对比数据)如下: 设备pro-5-1 base_list_1 = [0 ...

  9. vim一些常用的快捷键

    快速注释: Ctrl+v I // esc 打开文件 gf ctrl+o

  10. 准备NOIP2017 最长公共子序列（模版）

    一些概念: (1)子序列: 一个序列A ＝ a1,a2,--an,中任意删除若干项,剩余的序列叫做A的一个子序列.也可以认为是从序列A按原顺序保留任意若干项得到的序列.例如:   对序列 1,3,5, ...