当前位置：首页 > article >正文

JavaScript根据数据生成柱形图

article 2024/12/4 16:00:40

请添加图片描述

分析需求

// 定义一个数组来存储四个季度的数据
dataArray = []

// 循环4次，获取用户输入的数据并存储到数组中
for i from 0 to 3
    // 获取用户输入的数据
    inputData = 获取用户输入的第(i + 1)季度的数据
    // 将数据存入数组
    dataArray[i] = inputData

// 遍历数组，根据数据生成柱形图并渲染到页面
for i from 0 to 3
    // 创建一个div元素作为柱形图
    barDiv = 创建一个div元素
    // 设置div的宽度和高度，高度根据数据来定
    barDiv.width = 固定宽度
    barDiv.height = dataArray[i]
    // 在div中添加显示的数据和季度信息
    barDiv.textContent = "第" + (i + 1) + "季度: " + dataArray[i]
    // 将div添加到页面中
    将barDiv添加到页面

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

<head>
    <meta charset="UTF-8">
    <title>季度数据柱形图</title>
    <style>
        /* 定义类名为box的样式 */
       .box {
     
            display: flex;
            justify-content: space - around;
            align - items: flex - end;
            margin: 100px auto;