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

html做一个画柱形图的软件

news 文章来源：https://blog.csdn.net/weixin_47634487/article/details/139844474 2024/10/23 4:47:05

你可以使用 HTML、CSS 和 JavaScript 创建一个简单的柱形图绘制软件。为了方便起见，我们可以使用一个流行的 JavaScript 图表库，比如 Chart.js，它能够简化创建和操作图表的过程。

以下是一个完整的示例，展示如何使用 HTML 和 Chart.js 创建一个柱形图绘制工具。

1. 创建 HTML 文件

创建一个名为 index.html 的文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>柱形图绘制软件</title><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><style>body {font-family: Arial, sans-serif;margin: 20px;}.container {max-width: 800px;margin: 0 auto;text-align: center;}canvas {margin-top: 20px;}.form-group {margin-bottom: 10px;}.form-group input {padding: 5px;margin-left: 10px;}.form-group button {padding: 5px 10px;margin-left: 10px;}</style>
</head>
<body><div class="container"><h1>柱形图绘制软件</h1><div class="form-group"><label for="labels">标签 (用逗号分隔):</label><input type="text" id="labels" placeholder="例如: A,B,C,D,E"></div><div class="form-group"><label for="values">值 (用逗号分隔):</label><input type="text" id="values" placeholder="例如: 10,20,30,40,50"></div><div class="form-group"><button onclick="drawChart()">绘制柱形图</button></div><canvas id="myChart" width="800" height="400"></canvas></div><script>function drawChart() {// 获取输入的标签和值const labelsInput = document.getElementById('labels').value;const valuesInput = document.getElementById('values').value;// 将输入的标签和值转化为数组const labels = labelsInput.split(',').map(label => label.trim());const values = valuesInput.split(',').map(value => parseFloat(value.trim()));// 获取画布上下文const ctx = document.getElementById('myChart').getContext('2d');// 销毁先前的图表（如果存在）if (window.myBarChart) {window.myBarChart.destroy();}// 创建柱形图window.myBarChart = new Chart(ctx, {type: 'bar',data: {labels: labels,datasets: [{label: '数据集',data: values,backgroundColor: 'rgba(75, 192, 192, 0.2)',borderColor: 'rgba(75, 192, 192, 1)',borderWidth: 1}]},options: {scales: {y: {beginAtZero: true}}}});}</script>
</body>
</html>

2. 文件解释

HTML 部分：
- 创建一个表单，让用户输入标签和值。
- 包含一个按钮，用户可以点击来绘制柱形图。
- 包含一个 <canvas> 元素，用于绘制图表。
CSS 部分：
- 为页面和表单元素添加一些基本样式。
JavaScript 部分：
- 使用 Chart.js 库来创建柱形图。
- drawChart 函数读取用户输入的标签和值，转化为数组，然后使用 Chart.js 创建柱形图。
- 每次创建新图表前，先销毁先前的图表（如果存在），以确保新的图表正确显示。

3. 运行示例

将上述代码保存为 index.html 文件，然后在浏览器中打开这个文件。你将看到一个简单的界面，允许你输入标签和值，并在点击按钮后绘制柱形图。

这个示例展示了如何使用 HTML、CSS 和 JavaScript（Chart.js 库）来创建一个基本的柱形图绘制工具。你可以根据需要扩展和定制这个工具，以满足更复杂的需求。

在这里插入图片描述

html做一个画柱形图的软件

你可以使用 HTML、CSS 和 JavaScript 创建一个简单的柱形图绘制软件。为了方便起见，我们可以使用一个流行的 JavaScript 图表库，比如 Chart.js，它能够简化创建和操作图表的过程。以下是一个完整的示例，展示如何使用 HTML 和 Cha…...

编程日记 2024/6/21 4:24:38

Pyshark——安装、解析pcap文件

1、简介 PyShark是一个用于网络数据包捕获和分析的Python库，基于著名的网络协议分析工具Wireshark和其背后的libpcap/tshark库。它提供了一种便捷的方式来处理网络流量，适用于需要进行网络监控、调试和研究的场景。以下是PyShark的一些关键特性和使用方…...

编程日记 2024/6/21 4:23:37

java中的Random

Random 是 Java 中的一个内置类，它位于 java.util 包中，主要用于生成伪随机数。伪随机数是指通过一定算法生成的、看似随机的数，但实际上这些数是由确定的算法生成的，因此不是真正的随机数。然而，由于这些数在统计上具…...

编程日记 2024/6/21 4:21:33

PyMuPDF 操作手册 - 01 从PDF中提取文本

文章目录一、打开文件二、从 PDF 中提取文本2.1 文本基础操作2.2 文本进阶操作2.2.1 从任何文档中提取文本2.2.2 如何将文本提取为 Markdown2.2.3 如何从页面中提取键值对2.2.4 如何从矩形中提取文本2.2.5 如何以自然阅读顺序提取文本2.2.6 如何从文档中提取表格内容2.2.6.1 提…...

编程日记 2024/6/21 4:20:31

ResNet——Deep Residual Learning for Image Recognition(论文阅读)

论文名：Deep Residual Learning for Image Recognition 论文作者：Kaiming He et.al. 期刊/会议名：CVPR 2016 发表时间：2015-10 论文地址：https://arxiv.org/pdf/1512.03385 1.什么是ResNet ResNet是一种残差网络&a…...

编程日记 2024/6/21 4:19:29

java基础·小白入门（五）

目录内部类与Lambda表达式内部类Lambda表达式多线程内部类与Lambda表达式内部类在一个类中定义另外一个类，这个类就叫做内部类或内置类 (inner class) 。在main中直接访问内部类时，必须在内部类名前冠以其所属外部类的名字才能使用；在…...

编程日记 2024/6/21 4:18:27

微观时空结构和虚数单位的关系

回顾虚数单位的定义， 其中我们把称为周期（的绝大部分），称为微分，0称为原点或者起点（意味着新周期的开始），由此我们用序数的概念反过来构建了基数的概念。周期和单位显然具有倍数关…...

编程日记 2024/6/21 4:17:25

go-zero使用goctl生成mongodb的操作使用方法

目录 MongoDB简介 MongoDB的优势对比mysql的操作 goctl的mongodb代码生成如何使用 go-zero中mogodb使用 mongodb官方驱动使用 model模型的方式使用其他资源 MongoDB简介 mongodb是一种高性能、开源、文档型的nosql数据库，被广泛应用于web应用、大数据以…...

编程日记 2024/6/21 4:16:22

服务器新硬盘分区、格式化和挂载

文章目录参考文献查看了一下起点现状分区(base) ~ sudo parted /dev/sdcmklabel gpt（设置分区类型）增加分区格式化需要先退出quit（可以）(base) / sudo mkfs.xfs /dev/sdc/sdc1（失败）sudo mkfs.xfs /dev/s…...

编程日记 2024/6/21 4:14:18

Openldap集成Kerberos

文章目录一、背景二、Openldap集成Kerberos2.1kerberos服务器中绑定Ldap服务器2.1.1创建LDAP管理员用户2.1.2添加principal2.1.3生成keytab文件2.1.4赋予keytab文件权限2.1.5验证keytab文件2.1.6增加KRB5_KTNAME配置 2.2Ldap服务器中绑定kerberos服务器2.2.1生成LDAP数据库Roo…...

编程日记 2024/6/21 4:10:10

(创新)基于VMD-CNN-BiLSTM的电力负荷预测—代码+数据

目录一、主要内容： 二、运行效果： 三、VMD-BiLSTM负荷预测理论： 四、代码数据下载： 一、主要内容： 本代码结合变分模态分解( Variational Mode Decomposition，VMD) 和卷积神经网络(Convolutional neu…...

编程日记 2024/6/21 4:09:09

机器 reboot 后 kubelet 目录凭空消失的灾难恢复

文章目录 [toc]事故背景报错内容修复过程停止 kubelet 服务备份 kubelet.config重新生成 kubelet.config重新生成 kubelet 配置文件对比 kubeadm-flags.env 事故背景因为一些情况，需要 reboot 服务器，结果 reboot 机器后，kubeadm init 节点…...

编程日记 2024/6/21 4:08:08

VGG-16 1. 导入工具包 import torch.optim as optim import torch import torch.nn as nn import torch.utils.data import torchvision.transforms as transforms import torchvision.datasets as datasets from torch.utils.data import DataLoader import torch.optim.lr_…...

编程日记 2024/6/21 4:05:05

分支结构相关

1.if 语句结构： if 条件语句： 代码块小练习： 使用random.randint()函数随机生成一个1~100之间的整数，判断是否是偶数 import random n random.randint(1,100) print(n) if n % 2 0:print(str(n) "是偶数") 2.else语…...

编程日记 2024/6/21 4:04:03

flutter开发实战-RichText富文本居中对齐

flutter开发实战-RichText富文本居中对齐在开发过程中，经常会使用到RichText，当使用RichText时候，不同文本字体大小默认没有居中对齐。这里记录一下设置过程。一、使用RichText 我这里使用RichText设置不同字体大小的文本 Container(de…...

编程日记 2024/6/21 4:03:02

智慧消防新篇章：可视化数据分析平台引领未来

一、什么是智慧消防可视化数据分析平台？ 智慧消防可视化数据分析平台，运用大数据、云计算、物联网等先进技术，将消防信息以直观、易懂的图形化方式展示出来。它不仅能够实时监控消防设备的运行状态，还能对火灾风险进行预测和评估…...

编程日记 2024/6/21 4:00:59

u8g2 使用IIC驱动uc1617 lcd有时候某些像素显示不正确

折腾了很久，本来lcd是挂载到已经存在的iic总线上的，总线原来是工作正常的，挂载之后lcd也能显示，但是有时候显示不正确，有时候全白的时候有黑色的杂点。解决方案： 1.最开始以为是IIC总线速度快&#xff0…...

编程日记 2024/6/21 3:58:55

使用opencv合并两个图像

本节的目的 linear blending（线性混合）使用**addWeighted()**来添加两个图像原理 (其实我也没太懂，留个坑，感觉本科的时候线代没学好。不对，我本科就没学线代。) 源码分析源码链接 #include "opencv2/imgc…...

编程日记 2024/6/21 3:57:54

k8s学习笔记（一）

configMap 一般用来存储配置信息创建configMap 从文件中获取信息创建：kubectl create configmap my-config --from-file/tmp/k8s/user.txt 直接指定信息： kubectl create configmap my-config01 --from-literalkey1config1 --from-literalkey2confi…...

编程日记 2024/6/21 3:54:50

自学前端——JavaScript篇

JavaScript 什么是JavsScript JavaScript是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果，增加用户与网页的交互性。作为一种客户端语言，JavaScript可以直接嵌入HTML，并在浏览器中执行。与HTML和CSS不…...

编程日记 2024/6/21 3:53:48

高考毕业季--浅谈自己感想

随着2024年高考落幕，数百万高三学生又将面临人生中的重要抉择：选择大学专业。在这个关键节点，计算机相关专业是否仍是“万金油”的选择？在过去很长一段时间里，计算机科学与技术、人工智能、网络安全、软件工程等专业一…...

编程日记 2024/6/21 3:50:43

遥感图像地物覆盖分类，数据集制作-分类模型对比-分类保姆级教程

遥感图像地物覆盖分类，数据集制作-分类模型对比-分类保姆级教程在遥感影像上人工制作分类数据集采用python+gdal库制作数据集挑选分类模型(RF、KNN、SVM、逻辑回归)选择随机森林模型建模分类遥感图像预测在遥感影像上人工制作分类数据集 1.新建shp文件地理坐标系保持和影像…...

编程日记 2024/6/21 3:49:41

【Android面试八股文】Kotlin内置标准函数let的原理是什么？

确实，let 函数在 Kotlin 中被广泛使用，特别是在处理可空类型或者需要在对象上执行一系列操作后返回结果的场景中非常有用。 let 函数的源代码 /*** Calls the specified function [block] with `this` value as its argument and returns its result.** For detailed usage i…...

编程日记 2024/6/21 3:47:39

网工面试总结1

网工还是要基本会ACL、ISIS、OSPF、MPLS、QOS、GVRP、VRRP、FW、BGP、STP、IV4\6、WLAN、路由策略、策略路由、LACP等都或多或少要知道，常见的哪怕没有实战，要在ensp、cisco中练过！ OSPF邻居故障，你认为是哪些原因？或者…...

编程日记 2024/6/21 3:46:37

[stm32]密码锁

[stm32]密码锁需要资料的请在文章末尾获取~ 01描述使用原件：stm32f103c8t6最小系统板x1，0.96寸OLED显示屏四角x1，4x4矩阵按键x1; 键位对应图： 1， 2， 3， 4------------- 1 2 3 4 5&am…...

编程日记 2024/6/21 3:45:36

优化yarn在任务执行时核数把控不准确的问题

核数不准这个事情是个概率问题，如果你碰见了，只能说你有点非欧，本质上是因为集群配置问题，默认时yarn不会去精准把控任务的核数，因为默认的资源计算方式是用实际内存去估算核数，这就导致如果大家配置任务时…...

编程日记 2024/6/21 3:43:33

2024年，收付通申请开通流程

大家好，今天咱们来聊聊关于APP场景中开通微信收付通的一些实用小窍门。在如今的移动互联网时代，很多商家都选择通过APP来提供服务和产品，因此如何在APP中顺利集成微信收付通功能，让用户能够轻松完成支付，就显得尤为重要…...

编程日记 2024/6/21 3:42:32

Django使用django-apscheduler实现定时任务

定时任务可以在后台定时执行指定的代码，避免了很多人为操作。下面是在Django项目中如何使用定时任务的具体操作流程。我在这里使用的 django-apscheduler库来实现定时任务。一、安装 django-apscheduler pip install django-apscheduler二、在项目的setting.py…...

编程日记 2024/6/21 3:41:29

python数据分析：修改数据

在 Python 中进行数据分析时，通常使用 pandas 库来处理和修改数据。以下是一个完整的示例，展示如何使用 pandas 库读取数据、修改数据并保存结果。 1. 安装并导入必要的库首先，确保你已经安装了 pandas 库。如果没有安装，可以使…...

编程日记 2024/6/21 3:38:21

【免费API推荐】：解锁无限创意，让您的应用更具竞争力（8）

热门高效的免费实用类API是当今开发者们追逐的宝藏。这些API提供了各种热门功能和服务，能够帮助开发者轻松地为应用程序增添实用性和吸引力。无论是人脸识别、自然语言处理、机器学习还是图像处理，这些热门高效的免费API提供了强大的功能和高效的性能&am…...

编程日记 2024/6/21 3:37:20

初中做历史的网站/东莞互联网公司排名

应用场景-最短路径问题看一个应用场景和问题： 1)战争时期，胜利乡有7个村庄(A, B, C, D, E, F, G) ，现在有六个邮差，从G点出发，需要分别把邮件分别送到 A, B, C , D, E, F 六个村庄2)各个村庄的距离用边线表示(权) &am…...

编程日记 2024/10/23 4:34:52

绍兴高端网站设计/百度云电脑网页版入口

创收的实现是企业生存的根本目的，这个业务概念作为产生收入的手段，用于创建组织、基础设施以及市场上产品和服务销售和交付的方法。在创造收入和收入管理之间有明显的一致性，也就是说，在核算与经营成本相关的费用后获得利润。此外…...

编程日记 2024/10/23 2:58:02

淘宝客的网站是怎么做的/百度双十一活动

QT 加载文件，图片路径很容易搞混，需要注意的是WINDOW路径分隔符为“”,QT为“/”，我遇到的路径加载总结为三种情况： （1）绝对路径，文件的整个路径，比如 setWindowIcon(QIcon("F:…...

编程日记 2024/10/23 2:33:06

宿迁二手房个人出售最新消息/成都seo招聘

1.一个问题 wampserver安全成功启动报could not execute menu item internal error 解决办法：先查看你的安装目前存不存在中文把中文改成英文然后再检查端口号是否被占用主要查看apache 监听的80端口是否被占用 mysql监听的3306是否被占用成功的话…...

编程日记 2024/10/23 1:45:39

wordpress怎么设计首页/核心关键词如何优化

今天无意看到51CTO的周年庆擂台赛的参赛作品，其中有一个小雨的参赛宣言是“IT带给我们梦想。。。虽然这一行很累，但我喜欢。。”。看看这个宣言，在看看自己现在的工作，心里的疲倦顿时全没了。由于工作性质的特殊性，手机…...

编程日记 2024/10/23 0:54:32

人才网网站开发手册/如何制作自己的网址

微软小娜（Cortana） ios版第一部分：测评 1、首次体验界面内容很多，地图新闻美食电影天气等连车辆限号都有，感觉很强大。视觉上感觉很舒适，背景颜色也有多种颜色可供选择。功能也很多，提醒…...

编程日记 2024/10/23 0:44:11

1. 创建 HTML 文件

2. 文件解释

3. 运行示例

相关文章：