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

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

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 = [{
      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()

  }