今天，我们接着来说怎么去实现一个柱状图，看了下折线图的代码，忽然发现，改动量好小，实现的柱状图如下
具体怎么来实现呢，其实也很简单，坐标不管，如果对这块不熟，请参考折线图那一篇
那么我们就只剩下了怎么去画每一根柱子的工作量了，其实这个和画折线图是差不多的，画折线图时，当前点的起点就是上一个点的终点，柱状图的起点也很简单，y轴不变，x轴等距离分割即可，终点的x轴不变，把当前数据赋值给终点的y轴即可，另外，我们看到，里面用到了线性渐变，这个用到createLinearGradient,其实也好简单，我也不说了，要是遇到那种奇葩的产品需求，一般我就拖产品出去打一顿，然后不做（这是心里的想法，其实还得找办法去曲线救国）
投了web前端之路，居然审核不通过，说代码太多，那我再分开一步步说吧
1.画坐标
坐标分为纵坐标和横坐标，我们先来定义一下坐标原点，默认情况下，坐标原点位于canvas的左上角，即（0，0）的位置，如果我们以这个点来画坐标，其实也可以，但是不太符合我们一般的逻辑思维，一般我们都是从左下角开始画，所以我们需要通过使用translate变换坐标的原点，如下
ctx.translate(40, 500)
把坐标原点移到了距左40px的地方，距顶500px的地方，然后我们再从这个点开始画，首先，画出纵坐标，此时只需要把画笔移到当前坐标的（0，0）位置，然后向上画一条竖线，再画一下左边的箭头，再画一下右边的箭头，即可，代码如下
// 画y轴
ctx.moveTo(0, 0)
ctx.lineTo(0, -yaxisLength)
// y轴左边箭头
ctx.moveTo(0, -yaxisLength)
ctx.lineTo(-arrowLength, -(yaxisLength - arrowLength))
// y轴右边箭头
ctx.moveTo(0, -yaxisLength)
ctx.lineTo(arrowLength, -(yaxisLength - arrowLength))
接下来画横坐标，原理和画纵坐标一样，直接上代码吧
// 画x轴
ctx.moveTo(0, 0)
ctx.lineTo(xaxisLength, 0)
// x轴上边箭头
ctx.moveTo(xaxisLength, 0)
ctx.lineTo(xaxisLength - arrowLength, -arrowLength)
// x轴下边箭头
ctx.moveTo(xaxisLength, 0)
ctx.lineTo(xaxisLength - arrowLength, arrowLength)
ctx.stroke()
这样就把坐标画好了，接下来我们画每一个柱子
2.画柱子
首先我们来考虑怎么去画一根柱子，其实也比较简单，首先我们要等比例去切割每一个柱子之间的距离，然后在切割点去画每一个柱子，每一根柱子的宽度都是一样的，所以用lineWidth设置一个全局的柱子宽度，其实每一个柱子不一样的地方，就是柱子的高度和柱子的背景色，这里用到了渐变，那就需要一个渐变开始颜色和渐变结束颜色，再加上柱子的名字，柱子对应的数据结构基本如下
var data = [{
value: 200,
title: '第一季度',
startColor: 'red',
endColor: 'green'
},
{
value: 120,
title: '第二季度',
startColor: 'orange',
endColor: 'red'
},
{
value: 300,
title: '第三季度',
startColor: 'purple',
endColor: 'green'
},
{
value: 60,
title: '第四季度',
startColor: 'gray',
endColor: 'red'
}
]
data.unshift({
value: 0,
title: ''
})
里面的unshift只是为了遍历时从1开始，而不是从0开始，接下来就剩遍历了可以看到，每一次都把画笔移到了切割点的位置，然后延着y轴画了一条线，再使用createLinearGradient画一个渐变色，这样就能够实现一个简单的柱状图了
ctx.font = '20px Arial'
ctx.lineWidth = lineWidth
interval = xaxisLength / data.length
for (var i = 1, len = data.length; i < len; i++) {
ctx.beginPath()
ctx.strokeStyle = data[i].color
ctx.moveTo(interval * i, 0)
ctx.lineTo(interval * i, -data[i].value)
var y = -data[i].value - 20
var linearGradientObj = ctx.createLinearGradient(interval * i, 0, interval * i, -data[i].value)
linearGradientObj.addColorStop(0, data[i].startColor)
linearGradientObj.addColorStop(1, data[i].endColor)
ctx.strokeStyle = linearGradientObj
ctx.fillText(`${data[i].title}(${data[i].value})`, interval * i - 30, y)
ctx.stroke()
}
