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)
}
],
})
代码比较简单，看下注释很好理解。
希望对你有帮助！
