如何用D3.js绘制柱状图

JavaScript013

如何用D3.js绘制柱状图,第1张

1、模拟数据

// 模拟100条0-100的随机数，作为柱状图的高度

var data = Array.apply(0, Array(100)).map(function() {

 return Math.random() * 100

})

2、创建SVG容器

var margin = {top: 20, right: 20, bottom: 30, left: 50},

   width = document.body.clientWidth - margin.left - margin.right,

   height = 500 - margin.top - margin.bottom

var chart = d3.select('body')

 .append('svg')

 .attr('width', width + margin.left + margin.right)

 .attr('height', height + margin.top + margin.bottom)

 .append('g')

 .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')

chart就是最终建立的容器，下面就往容器里面放元素。

3、画柱状图

// 计算每根柱状物体的宽度

var barWidth = width / data.length

// 用g作每根柱状物体的容器，意义可类比div

// 前一篇文章已经介绍过selectAll的意义，即生成占位符，等待填充svg图形

var bar = chart.selectAll('g')

 .data(data)

 .enter()

 .append('g')

 // 接收一个数据填充一个g元素

 // 同时为g设置位置

 .attr('transform', function(d, i) {

   return 'translate(' + i * barWidth + ', 0)'

 })

bar.append('rect')

 // 添加一个矩形

 .attr('y', function(d) {

   return height - d

 })

 .attr('height', function(d) {

   return d

 })

 .attr('width', barWidth - 1)

前文提到svg的元素定位都是基于整个svg容器左上角作为原点，但并不能使用position: absolute等方法定位，此处的g元素通过位移来定位x坐标，即transform: translate(x, 0)。

这里的bar可类比jQuery对象，是一个类数组对象，bar调用的方法都会对bar里面每个对象进行调用。代码中每一次调用都插入一个矩形，同时设置y坐标、高度和宽度，x坐标跟父容器（g）保持一致即可。这里需要注意y坐标往下为正，为了让所有矩形的下边处于同一高度，这里设置每个矩形的y坐标为容器高度减去矩形高度。为了用一像素区分开每个矩形，这里设置矩形宽度为父容器的宽度减1。

通过以上js代码再稍微设置一点css

rect {

 fill: #2177BB

}

即可看到一张最简单的柱状图了。

4、添加坐标轴

var y = d3.scale.linear()

 .domain([0, d3.max(data)])

 .range([height, 0])

var xAxis = d3.svg.axis()

 .scale(x)

 .orient('bottom')

 .ticks(1)

var yAxis = d3.svg.axis()

 .scale(y)

 .orient('left')

// 添加x坐标轴

chart.append('g')

 .attr('class', 'x axis')

 .attr('transform', 'translate(0,' + height + ')')

 .call(xAxis)

// 添加y坐标轴

chart.append('g')

 .attr('class', 'y axis')

 .call(yAxis)

完整的柱状图就是这样了

你好！

为不同数据的柱状图赋值对应的颜色，只需要设置series->data中每个元素的color属性即可。

//定义一个颜色数组

var COLORS = ['#4dc9f6','#f67019','#f53794','#537bc4','#acc236','#166a8f','#00a950','#58595b','#8549ba']

//根据数值返回对应的颜色值

var getColorByData = function(v) {

    return v < 80 ? COLORS[0]

         : v < 83 ? COLORS[1]

         : v < 86 ? COLORS[2]

         : v < 87 ? COLORS[3]

         : v < 88 ? COLORS[4]

         : v < 89 ? COLORS[5]

         : COLORS[6]

}

//对图表数据进行color属性赋值,用于显示

var genData = function(data) {

    if(data && data.length>0) {

        for(var i=0i<data.lengthi++){

            data[i].color = getColorByData(data[i].y)

        }

    }

    return data

}

//图表数据

var _data = [

  {

    name: "下车体1#",

y: 88,

  },

  {

name: "下车体2#",

y: 89,

  },

  {

name: "下车体3#",

y: 82,

  },

  {

name: "下车体4#",

y: 85,

  },

]

Highcharts.chart('gongzhuangjiancha', {

  chart: {

type: 'column'

  }, 

  title: {

text: ''

  },

  xAxis: {

    type: 'category'

  },

  yAxis: {

max: 100,

min:50,

title: {

        text: null

}

  },

  legend: {

enabled: false

  },

  plotOptions: {

    series: {

    borderWidth: 0,

      dataLabels: {

enabled: true,

format: '{point.y:.1f}%'

  }

}

  },

  tooltip: {

    headerFormat: '<span style="font-size:11px"></span><br>',

pointFormat: '<span style="color:{green}">{point.name}</span>: <b>符合率为{point.y:.2f}%</b><br/>'

  },

  series: [

      {

  name: "Browsers",

  colorByPoint:false ,

      data: genData(_data)

}

  ],

})

代码比较简单，看下注释很好理解。

希望对你有帮助！