JavaScript根据数据生成柱形图

请添加图片描述

分析需求

// 定义一个数组来存储四个季度的数据
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;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/61628.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

No module named ‘huggingface_hub‘

No module named ‘huggingface_hub‘

问题描述 from huggingface_hub import PyTorchModelHubMixin ModuleNotFoundError: No module named huggingface_hub解决方法 pip install huggingface_hub
阅读更多...
Redis实现限量优惠券的秒杀

Redis实现限量优惠券的秒杀

核心&#xff1a;避免超卖问题&#xff0c;保证一人一单 业务逻辑 代码步骤分析 全部代码 Service public class VoucherOrderServiceImpl extends ServiceImpl<VoucherOrderMapper, VoucherOrder> implements IVoucherOrderService {Resourceprivate ISeckillVoucher…
阅读更多...
《Python 视频格式转换全攻略》

《Python 视频格式转换全攻略》

《Python 视频格式转换全攻略》 一、引言二、Python 视频格式转换的常用库1. moviepy 库安装方法。示例代码将视频文件转换为另一种格式。2. pydub 库用于提取视频中的音频部分。示例代码展示如何提取音频并保存为 MP3 格式。3. opencv-python 库介绍其在视频处理中的作用。示例…
阅读更多...
gitignore 不起作用

gitignore 不起作用

.gitignore不起作用 文件已提交至远程仓库&#xff0c;已经被Git跟踪。清除缓存.gitignore位置可能不是与 .git隐藏文件夹同级目录。将文件移至同级目录缓存未清除 清除缓存 清楚git缓存步骤 进入项目路径 清除本地当前的Git缓存 git rm -r --cached . 应用.gitignore等本地…
阅读更多...
Flutter：city_pickers省市区三级联动

Flutter：city_pickers省市区三级联动

pubspec.yaml city_pickers插件地址 自己用的GetBuilder页面模板 cupertino_icons: ^1.0.8 # 省市区城市选择 city_pickers: ^1.3.0编辑地址页面&#xff1a;controller class AddressEditController extends GetxController {AddressEditController();Future<Result?>…
阅读更多...
算法训练（leetcode）二刷第三十三天 | *322. 零钱兑换、*279. 完全平方数、*139. 单词拆分

算法训练（leetcode）二刷第三十三天 | *322. 零钱兑换、*279. 完全平方数、*139. 单词拆分

刷题记录 *322. 零钱兑换*279. 完全平方数*139. 单词拆分 *322. 零钱兑换 leetcode题目地址 dp[j]存储amount为j时所需要的最少硬币数。当j为0时需要0个硬币&#xff0c;因此dp[0]赋值为0. 因为是取最少硬币数&#xff0c;因此初始化需要赋值一个最大值。 状态转移方程&…
阅读更多...
ansible自动化运维（一）配置主机清单

ansible自动化运维（一）配置主机清单

目录 一、介绍 1.1了解自动化运维 1.2 ansible简介 1.3 ansible自动化运维的优势 1.4 ansible架构图 二、部署ansible 2.1 基本参数 2.2 Ansible帮助命令 2.3 配置主机清单 2.3.1 查看ansible的所有配置文件 2.3.2 /etc/ansible/ansible.cfg常用配置选项 2.3.3 ssh密…
阅读更多...
MySQL Workbench 数据库建模详解：从设计到实践

MySQL Workbench 数据库建模详解：从设计到实践

目录 数据库建模基础概念MySQL Workbench 简介与安装 什么是 MySQL Workbench&#xff1f;安装与环境配置 MySQL Workbench 数据库建模功能详解 EER 图&#xff08;实体关系图&#xff09;数据库反向工程数据库正向工程模型同步与版本管理 MySQL Workbench 数据库建模实战教程…
阅读更多...
12.2深度学习_项目实战

12.2深度学习_项目实战

十、项目实战 鲍勃开了自己的手机公司。他想与苹果、三星等大公司展开硬仗。 他不知道如何估算自己公司生产的手机的价格。在这个竞争激烈的手机市场&#xff0c;你不能简单地假设事情。为了解决这个问题&#xff0c;他收集了各个公司的手机销售数据。 鲍勃想找出手机的特性(例…
阅读更多...
视频流媒体服务解决方案之Liveweb视频汇聚平台

视频流媒体服务解决方案之Liveweb视频汇聚平台

一&#xff0c;Liveweb视频汇聚平台简介: LiveWeb是深圳市好游科技有限公司开发的一套综合视频汇聚管理平台&#xff0c;可提供多协议&#xff08;RTSP/RTMP/GB28181/海康Ehome/大华&#xff0c;海康SDK等&#xff09;的视频设备接入&#xff0c;支持GB/T28181上下级联&#xf…
阅读更多...
ES中间件学习书籍阅读笔记

ES中间件学习书籍阅读笔记

ES的书籍学习阅读笔记 一本书讲透ElasticSearch&#xff1a;原理、进阶与工程实践ES的基础知识搜索引擎基础知识倒排索引全文检索 ES的核心概念ES集群知识介绍基础知识 一本书讲透ElasticSearch&#xff1a;原理、进阶与工程实践 ES的基础知识 搜索引擎基础知识 倒排索引 面…
阅读更多...
物联网——WatchDog（监听器）

物联网——WatchDog（监听器）

看门狗简介 独立看门狗框图 看门狗原理&#xff1a;定时器溢出&#xff0c;产生系统复位信号&#xff1b;若定时‘喂狗’则不产生系统复位信号 定时中断基本结构&#xff08;对比&#xff09; IWDG键寄存器 独立看门狗超时时间 WWDG(窗口看门狗) WWDG特性 WWDG超时时间 由于…
阅读更多...
LabVIEW将TXT文本转换为CSV格式（多行多列）

LabVIEW将TXT文本转换为CSV格式（多行多列）

在LabVIEW中&#xff0c;将TXT格式的文本文件内容转换为Excel格式&#xff08;即CSV文件&#xff09;是一项常见的数据处理任务&#xff0c;适用于将以制表符、空格或其他分隔符分隔的数据格式化为可用于电子表格分析的形式。以下是将TXT文件转换为Excel&#xff08;CSV&#x…
阅读更多...
我的第一个创作纪念日 —— 梦开始的地方

我的第一个创作纪念日 —— 梦开始的地方

前言 时光荏苒&#xff0c;转眼间&#xff0c;我已经在CSDN这片技术沃土上耕耘了365天 今天&#xff0c;我迎来了自己在CSDN的第1个创作纪念日&#xff0c;这个特殊的日子不仅是对我过去努力的肯定&#xff0c;更是对未来持续创作的激励 机缘 回想起初次接触CSDN&#xff0c;那…
阅读更多...
Android：生成Excel表格并保存到本地

Android：生成Excel表格并保存到本地

提醒 本文实例是使用Kotlin进行开发演示的。 一、技术方案 org.apache.poi:poiorg.apache.poi:poi-ooxml 二、添加依赖 [versions]poi "5.2.3" log4j "2.24.2"[libraries]#https://mvnrepository.com/artifact/org.apache.poi/poi apache-poi { module…
阅读更多...
Leecode刷题C语言之N皇后②

Leecode刷题C语言之N皇后②

执行结果:通过 执行用时和内存消耗如下&#xff1a; struct hashTable {int key;UT_hash_handle hh; };struct hashTable* find(struct hashTable** hashtable, int ikey) {struct hashTable* tmp NULL;HASH_FIND_INT(*hashtable, &ikey, tmp);return tmp; }void insert(…
阅读更多...
vue跳转以及传参

vue跳转以及传参

1.跳转页面的三种方法 <template><button click"twopage">跳转</button> </template><script setup> import { useRouter } from "vue-router"; const router useRouter(); // 获取 router 实例const twopage () > {r…
阅读更多...
EasyMedia播放rtsprtmp视频流（flvhls）

EasyMedia播放rtsprtmp视频流（flvhls）

学习链接 MisterZhang/EasyMedia - gitee地址 EasyMedia转码rtsp视频流flv格式&#xff0c;hls格式&#xff0c;H5页面播放flv流视频 EasyMedia播放rtsp视频流&#xff08;vue2、vue3皆可用&#xff09; EasyMedia转码rtsp视频流flv格式&#xff0c;hls格式&#xff0c;H5页…
阅读更多...
用 React 编写一个笔记应用程序

用 React 编写一个笔记应用程序

这篇文章会教大家用 React 编写一个笔记应用程序。用户可以创建、编辑、和切换 Markdown 笔记。 1. nanoid nanoid 是一个轻量级和安全的唯一字符串ID生成器&#xff0c;常用于JavaScript环境中生成随机、唯一的字符串ID&#xff0c;如数据库主键、会话ID、文件名等场景。 …
阅读更多...
利用 Redis 与 Lua 脚本解决秒杀系统中的高并发与库存超卖问题

利用 Redis 与 Lua 脚本解决秒杀系统中的高并发与库存超卖问题

1. 前言 1.1 秒杀系统中的库存超卖问题 在电商平台上&#xff0c;秒杀活动是吸引用户参与并提升销量的一种常见方式。秒杀通常会以极低的价格限量出售某些商品&#xff0c;目的是制造紧迫感&#xff0c;吸引大量用户参与。然而&#xff0c;这种活动的特殊性也带来了许多技术挑…
阅读更多...
最新文章

Copyright @ 2022~2023