canvas画圆顶柱状图

需求&效果图

canvas.png

DOM部分

<canvas id="demos">
      你的浏览器不支持 canvas，请升级你的浏览器。
</canvas>

Js部分

  <script src="./_histogram.js"></script>
  <script>
    let canvas = document.getElementById('demos');
    // 检测支持性
    if (canvas.getContext) {
      canvas.width = 500
      canvas.height = 350
      // 获取2d上下文对象
      let ctx = canvas.getContext('2d');
      let htgParam = [
        {
          label: '设计',
          value: '100%',
          color: {
            start: '#273D6D',
            end: '#477FA0'
          }
        },
        {
          label: '产品',
          value: '86.4%',
          color: {
            start: '#693756',
            end: '#744F5A'
          }
        },
        {
          label: '财务',
          value: '74.6%',
          color: {
            start: '#2E80D2',
            end: '#45CDDF'
          }
        },
        {
          label: '技术',
          value: '74.6%',
          color: {
            start: '#E8E5E4',
            end: '#FFFFFF'
          }
        },
        {
          label: '市场',
          value: '56%',
          color: {
            start: '#1B7FD2',
            end: '#64C1E9'
          }
        },
      ]
      strokeHistogralm(ctx, htgParam)
    } else {
      alert('你的浏览器不支持 canvas，请升级你的浏览器。');
    }
  </script>

辅助函数_histogram.js

  /**
  * 绘制圆角矩形
  * @param {Object} ctx - canvas组件的绘图上下文
  * @param {Array} columns - 数据
  */
  const strokeHistogralm = (ctx, columns = []) => {
    // 描绘坐标轴
    ctx.beginPath();
    ctx.strokeStyle = '#FFFFFF';
    ctx.lineWidth = 4;
    ctx.moveTo(50,302);
    ctx.lineTo(450,302);
    ctx.lineCap = 'round';
    ctx.stroke();

    // 描绘柱体
    columns.forEach((element, index) => {
      let {label,value,color} = element
      let labelX = 72 + index * 80
      let middleX = 90 + index * 80
      let fillRectX = 75 + index * 80
      let fillRectY = 115 + Math.ceil(100 - element.value.slice(0,-1)) * 2

      ctx.beginPath()
      ctx.font = "14px 'arial'"
      ctx.fillStyle = '#FFFFFF';
      ctx.fillText(value, labelX, fillRectY - 30);
      ctx.fillText(label, labelX, 329);
      ctx.beginPath();
      let grd = ctx.createLinearGradient(middleX,300,middleX,fillRectY - 15);
      grd.addColorStop(0,color.start);
      grd.addColorStop(1,color.end);
      ctx.fillStyle = grd;
      console.log(fillRectY)
      ctx.fillRect(fillRectX, fillRectY, 30, 300 - fillRectY);
      ctx.arc(fillRectX + 15, fillRectY, 15, Math.PI, Math.PI * 2);
      ctx.fill();
      ctx.closePath();
    })
  }