一步一步去实现一个柱状图一步一步去实现一个柱状图

今天，我们接着来说怎么去实现一个柱状图，看了下折线图的代码，忽然发现，改动量好小，实现的柱状图如下

文章图片
image.png 具体怎么来实现呢，其实也很简单，坐标不管，如果对这块不熟，请参考折线图那一篇
那么我们就只剩下了怎么去画每一根柱子的工作量了，其实这个和画折线图是差不多的，画折线图时，当前点的起点就是上一个点的终点，柱状图的起点也很简单，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 = https://www.it610.com/article/[{ 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()}