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

字数 855阅读 65

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


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()

  }

推荐阅读更多精彩内容