使用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.运行效果

时间: 2024-10-07 17:59:09

使用D3绘制图表(6)--竖直柱状图表的相关文章

使用D3绘制图表(7)--饼状图

这次是绘制饼状图,也是这一次使用D3绘制图表的最后一篇,大家可以从其他地方深入学习D3绘制图表,也可以直接查看D3的API进行学习,本次绘制饼状图的数据跟之前的卸载数组里面的不一样,这一次是使用d3的csv(url)函数读取的一个data.csv文件,在此声明,如果网页的编辑器不是使用自带的服务器打开网页的那就会读取不了csv文件报错,我这里使用的HBuilder,一款还不错的编辑器. 1.data.csv文件,以键值对的形式书写 education,population 大专及以上,11964

基于HTML5 Canvas的饼状图表实现教程

昨天我们分享了一款基于HTML5的线性图表应用,效果非常不错,可以看在线DEMO或者实现教程.今天我们继续来分享一款基于HTML5的网页图表,它也是利用Canvas绘制的,但是和前面不同的是,这款图表是饼状图,并且我们可以点击右侧的表格来选中激活当前的图表数据,具体效果可以看DEMO演示. 你也可以在这里查看在线演示 下面是实现的过程及源码,一起分享给大家. HTML代码: <div id="container"> <canvas id="chart&quo

用Jfree实现条形柱状图表,java代码实现

title: The following iterative sequence is defined for the set of positive integers: n n/2 (n is even) n 3n + 1 (n is odd) Using the rule above and starting with 13, we generate the following sequence: 13 40 20 10 5 16 8 4 2 1 It can be seen that thi

d3 绘制散点图

之前看了angularjs,又看了看d3 on angularjs这本书,本来打算使用angularjs,结果把npm玩坏了,现在都没修好,只好先单独用d3绘制了. 先贴代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>d3</title> 6 <script src=&q

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

网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如下: (1)新建一个网页文件,命名为Hello.html.同时,将title设置为Hello Highcharts.代码如下: <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head>

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

网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细讲解图表区的设置和创建. 网页图表Highcharts图表区的构成 为了方便管理,Highcharts将所有的图表元素都绘制在一个Box区域内,如图2.1所示.这个区域被称为图表区.由于图表中最重要的数据就是图表图形,所以图表图形所在的区域又构成一个独立的区域,称为绘图区,如图2.1所示. 图2

使用D3绘制图表(5)--水平柱状图表

绘制水平柱状图表的方法也不是很难,首先在svg中插入g,然后在g中插入rect. 1.html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="container"></div> </body>

使用D3绘制图表(4)--面积图表

面积图表的绘制就是在曲线图表的基础上做一点小小的改动.其他的代码跟绘制曲线图表没有什么区别,下面有黄色背景颜色的代码就是修改的,是不是很简单,第一句修改的地方就是把之前绘制线的函数(line)改成了绘制面积的函数(area):第二句代码就是加的一行,“.y0(g_height)”这个意思代表的是x轴.“.y1(function(d){return scale_y(d);})”这句和上一句就构成了一个面积,“.style("fill","cornflowerblue"

使用D3绘制图表(3)--添加坐标轴和文本标签

上一篇是曲线的绘制,这样仅仅只是有一条线,完全先是不出数据想要表现的内容,于是我们要添加坐标系,添加坐标系和画线类似. 1.还是没有变化的html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/style.css&q