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

html做一个画柱形图的软件

news 2026/2/10 2:30:37

你可以使用 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 创建一个简单的柱形图绘制软件。为了方便起见&#xff0c;我们可以使用一个流行的 JavaScript 图表库&#xff0c;比如 Chart.js&#xff0c;它能够简化创建和操作图表的过程。 以下是一个完整的示例&#xff0c;展示如何使用 HTML 和 Cha…...

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

Pyshark——安装、解析pcap文件

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

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

java中的Random

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

编程日记 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(论文阅读)

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

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

java基础·小白入门（五）

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

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

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

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

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

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

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

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

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

文章目录 参考文献查看了一下起点现状分区(base) ~ sudo parted /dev/sdcmklabel gpt&#xff08;设置分区类型&#xff09;增加分区 格式化需要先退出quit&#xff08;可以&#xff09;(base) / sudo mkfs.xfs /dev/sdc/sdc1&#xff08;失败&#xff09;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的电力负荷预测—代码+数据

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

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

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

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

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

Pytorch构建vgg16模型

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 语句 结构&#xff1a; if 条件语句&#xff1a; 代码块 小练习&#xff1a; 使用random.randint()函数随机生成一个1~100之间的整数&#xff0c;判断是否是偶数 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富文本居中对齐 在开发过程中&#xff0c;经常会使用到RichText&#xff0c;当使用RichText时候&#xff0c;不同文本字体大小默认没有居中对齐。这里记录一下设置过程。 一、使用RichText 我这里使用RichText设置不同字体大小的文本 Container(de…...

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

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

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

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

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

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

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

使用opencv合并两个图像

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

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

k8s学习笔记（一）

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

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

自学前端——JavaScript篇

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

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

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/10/6 4:03:40

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

Python Ovito统计金刚石结构数量

大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2026/1/26 5:39:08

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2026/1/29 5:39:49

LOOI机器人的技术实现解析：从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

编程新知 2025/6/10 21:22:04

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2026/2/7 10:22:16

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2026/1/16 15:03:10

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2026/2/5 4:33:51

Neko虚拟浏览器远程协作方案：Docker+内网穿透技术部署实践

前言&#xff1a;本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中&#xff0c;跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南&#xff0c;你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案&#xff0c;并结合内网…...

编程新知 2026/2/9 22:04:22