:::info 根据数据生成柱形图 :::

需求

需求： 用户输入四个季度的数据，可以生成柱形图
分析：
①：需要输入4次，所以可以把4个数据放到一个数组里面
 利用循环，弹出4次框，同时存到数组里面
②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中
 柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
 div里面包含显示的数字和 第n季度

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         .box {
  16.             display: flex;
  17.             width: 700px;
  18.             height: 300px;
  19.             border-left: 1px solid pink;
  20.             border-bottom: 1px solid pink;
  21.             margin: 50px auto;
  22.             justify-content: space-around;
  23.             align-items: flex-end;
  24.             text-align: center;
  25.         }
  27.         .box>div {
  28.             display: flex;
  29.             width: 50px;
  30.             background-color: pink;
  31.             flex-direction: column;
  32.             justify-content: space-between;
  33.         }
  35.         .box div span {
  37.             margin-top: -20px;
  38.         }
  40.         .box div h4 {
  41.             margin-bottom: -35px;
  42.             width: 70px;
  43.             margin-left: -10px;
  44.         }
  45.     </style>
  46. </head>
  48. <body>
  51.     <script>
  52.         //1. 循环生成四个弹窗,来接收用户输入的四个季度的数据,并将四个季度的数据放到一个数组里面去
  53.         let dataArr = []
  54.         for (let i = 1; i <= 4; i++) {
  55.             dataArr.push(+prompt(`请输入${i}季度的数据`))
  56.         }
  58.         // 父盒子的生成
  59.         document.write('<div class="box">')
  60.         //循环dataArr遍历数组,将获取的数据渲染到页面上去
  61.         for (let j = 0; j < dataArr.length; j++) {
  62.             document.write(`<div style="height: ${dataArr[j]}px;">
  63.                     <span>${dataArr[j]}</span>
  64.                     <h4>第${j+1}季度</h4>
  66.                 </div>`)
  67.         }
  69.         document.write('</div>')
  70.     </script>
  71. </body>
  73. </html>

效果

Video_2022-07-15_095012.gif