HTML5 柱状图

MMNHD

于 2022-02-16 22:10:41 发布

阅读量1k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/m0_63327154/article/details/122972722

版权

html5 前端 html

html5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<style>
    canvas {
      border: 1px solid black; 
      background-color: aliceblue;
    }
  </style>
</head>
<body>
  <canvas id="cvs" width="450" height="250"></canvas>
  <script>
    let ctx = cvs.getContext('2d') // Context对象
    const WIDTH = 450    // 画布的宽  
    const HEIGHT = 250   // 画布的高
    let barWidth = 45    // 柱子的宽度
    let data = [120, 200, 150, 80, 70, 110, 130] // 数据
    // 通过已知的参数，计算绘制7根柱子所需要的数据
    let xs = []
    let ys = []
    let ws = []
    let hs = []
    // 整理这些数组数据
    let fx = 
      (WIDTH - barWidth*data.length)/(2*data.length)
    for(let i=0; i<data.length; i++){
      xs.push(i*barWidth + (2*i+1)*fx)
      ys.push(HEIGHT - data[i] - 20)
      ws.push(barWidth) 
      hs.push(data[i])
    }
    // 根据已知数据，绘制柱状图
    for(let i=0; i<data.length; i++){
      // 输出柱子
      ctx.fillStyle = "#36D"
      ctx.fillRect(xs[i], ys[i], ws[i], hs[i])
      // 输出文本
      ctx.fillStyle = "#000"
      ctx.font = '13px 微软雅黑'
      ctx.textAlign = 'center'
      ctx.fillText(data[i], xs[i]+barWidth/2, HEIGHT-5)
    }

  </script>