Write a silky data bar graph on canvas; Implement simple data visualization

legend

code

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>The bar chart</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #canvas {
      margin: 0 auto;

    }
  </style>
</head>

<body>
  <div id='container'>
    <canvas id='canvas' width="500" height="500"></canvas>
  </div>
</body>
<! -- <script src="./json.js"></script> -->
<script>
  const color = ['#74cbed'.'#d5d0fd'.'#7767f9'.'#fcecbd'.'#61daab'.'#329a99'.'#d5eff9']
  // console.log('json', testJson)
  let canvas, ctx;
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d')

  // Empty the canvas
  function clear() {
    ctx.clearRect(0.0, ctx.canvas.width, ctx.canvas.height);
  }
  // Draw the X-axis
  function drawX() {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(20.480)
    ctx.lineTo(480.480)
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;
    ctx.stroke()
    ctx.restore()

  }


  // Draw the Y-axis
  function drawY() {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(20.480)
    ctx.lineTo(20.20)
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;
    ctx.stroke()
    ctx.restore()
  }


  // Render bar charts and numbers
  function drawBar(v, i, max) {
    const start = 480 - (i + 1) * 20;
    const allLen = 400;
    let base = 100;
    while (base < max) {
      base += 100
    }
    const len = Math.floor(allLen * v / base)
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(20, start)
    ctx.lineTo(len, start)
    ctx.strokeStyle = color[i % 7];
    ctx.lineWidth = 4;
    ctx.stroke()
    ctx.restore()
    drawText(v, len + 6, start + 6)}// Draw text
  function drawText(text, x, y) {
    text = text || ' '
    x = x || 0
    y = y || 0
    ctx.save();
    ctx.beginPath();
    ctx.font = '12px "Microsoft Yahei"
    ctx.fillStyle = '#30f'
    ctx.textBaseline = 'bottom'
    ctx.fillText(text, x, y)
    ctx.restore()
  }

  function buildDataList(num) {
    return Array(10).fill(20).map(v= > Math.floor(Math.random() * (num || 600)))}let nextList = buildDataList(100)
  let list = buildDataList(100)
  let index = 1;
  let status = null
  let diffBase = null;
  // Draw the scene
  function drawScene() {
    const array = buildDataList();

    list = list.map((v, i) = > v + array[i])
    diffBase = list.map(v= > Math.floor(v / 60))

    if(! status) { animationDrawBar(); status ='doing'
    }
    console.log('list', list)

  }



  function animationDrawBar() {

    // Execute 60 times per second;
    // Execute 50 times
    // Control left and right,
    // Need to control up and down
    const start = () = > {
      clear()
      drawX()
      drawY();

      nextList = nextList.map((v, i) = > v >= list[i] ? list[i] : v + 2)

      //console.log('nextList', nextList)
      const max = Math.max(... list) nextList.forEach((v, i) = > drawBar(v, i, max));
      // if (sign.length) {
      // requestAnimationFrame(start);
      // }
      requestAnimationFrame(start);

    };
    window.requestAnimationFrame(start);
  }

  // const start = () => {
  // drawScene();
  // // requestAnimationFrame(start);
  / /}; \
  let limit = 0
  // setInterval(() => {
  // if (limit < 15) {
  // drawScene()
  / /}
  // limit++

  // }, 10000);
  drawScene()

  // window.requestAnimationFrame(start);




</script>

</html>
Copy the code