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

html做一个画热图的软件

news 2026/5/18 3:24:58

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>热图生成器</title><script src="https://cdn.plot.ly/plotly-latest.min.js"></script><style>body {font-family: Arial, sans-serif;}#inputContainer {margin-bottom: 20px;}textarea {width: 100%;height: 100px;}button {margin-top: 10px;}#heatmap {width: 100%;height: 500px;}</style>
</head>
<body><h1>热图生成器</h1><div id="inputContainer"><label for="dataInput">请输入数据（以逗号分隔，每行表示一行数据）：</label><textarea id="dataInput">1,20,30\n20,1,60\n30,60,1</textarea><br><button onclick="generateHeatmap()">生成热图</button></div><div id="heatmap"></div><script>function generateHeatmap() {// 获取输入的数据const inputData = document.getElementById('dataInput').value;// 解析数据const rows = inputData.split('\n');const z = rows.map(row => row.split(',').map(Number));// 定义热图数据const data = [{z: z,type: 'heatmap'}];const layout = {title: '生成的热图',xaxis: {title: '列'},yaxis: {title: '行'}};// 绘制热图Plotly.newPlot('heatmap', data, layout);}</script>
</body>
</html>

说明

  1. 引入Plotly.js库：在<head>标签中，通过<script>标签引入Plotly.js库。
  2. 输入数据的文本区域：在<div id="inputContainer">中添加一个<textarea>供用户输入数据。
  3. 生成热图的按钮：添加一个按钮，点击按钮时会调用generateHeatmap函数。
  4. 生成热图的函数：
    • 从<textarea>中获取用户输入的数据。
    • 将输入的数据按行拆分，并将每行数据按逗号拆分成数组。
    • 使用这些数据生成热图。
    • 使用Plotly.js的Plotly.newPlot函数将热图绘制到<div id="heatmap">中。

使用方法

  1. 将上述代码保存为一个HTML文件（例如heatmap_generator.html）。
  2. 在浏览器中打开该文件。
  3. 在文本区域中输入数据，每行代表一行数据，数据项之间用逗号分隔。例如：
    1,20,30
20,1,60
30,60,1
  4. 点击“生成热图”按钮，热图将会显示在页面中。

在这里插入图片描述

相关文章：

html做一个画热图的软件

完整示例 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>热图生成器</title><script src"https://cdn.plot.ly/plotly-latest.min.js"></script><style>body …...

编程日记 2024/6/23 21:32:52

软考初级网络管理员__软件单选题

1.在Excel 中&#xff0c;设单元格F1的值为56.323&#xff0c;若在单元格F2中输入公式"TEXT(F1,"&#xffe5;0.00”)”&#xff0c;则单元格F2的值为()。 &#xffe5;56 &#xffe5;56.323 &#xffe5;56.32 &#xffe5;56.00 2.要使Word 能自动提醒英文单…...

编程日记 2024/6/23 21:31:51

数据库新技术【分布式数据库】

文章目录 第一章 概述1.1 基本概念1.1.1 分布式数据库1.1.2 数据管理的透明性1.1.3 可靠性1.1.4 分布式数据库与集中式数据库的区别 1.2 体系结构1.3 全局目录1.4 关系代数1.4.1 基操1.4.2 关系表达式1.4.3 查询树 第二章 分布式数据库的设计2.1 设计策略2.2 分布设计的目标2.3…...

编程日记 2024/6/23 21:30:50

关于运用人工智能帮助自己实现英语能力的有效提升？

# 实验报告 ## 实验目的 - 描述实验的目标&#xff1a;自己可以知道&#xff0c;自己的ai学习方法是否可以有效帮助自己实现自己的学习提升。 预期结果&#xff1a;在自己利用科技对于自己进行学习的过程中&#xff0c;自己的成长速度应该是一个幂指数的增长 ## 文献回顾 根据…...

编程日记 2024/6/23 21:29:49

IPv6知识点整理

IPv6&#xff1a;是英文“Internet Protocol Version 6”&#xff08;互联网协议第6版&#xff09;的缩写&#xff0c;是互联网工程任务组&#xff08;IETF&#xff09;设计的用于替代IPv4的下一代IP协议&#xff0c;其地址数量号称可以为全世界的每一粒沙子编上一个地址 。 国…...

编程日记 2024/6/23 21:28:48

数据赋能（127）——体系：数据标准化——概述、关注焦点

概述 数据标准化是指将数据按照一定的规范和标准进行处理的过程。 数据标准化是属于数据整理过程。 数据标准化的目的在于提高数据的质量、促进数据的共享和交互、降低数据管理的成本&#xff0c;并增强数据的安全性。通过数据标准化&#xff0c;可以使得数据具有统一的格式…...

编程日记 2024/6/23 21:27:47

【 ARMv8/ARMv9 硬件加速系列 3.5.1 -- SVE 谓词寄存器有多少位？】

文章目录 SVE 谓词寄存器(predicate registers)简介SVE 谓词寄存器的位数SVE 谓词寄存器对向量寄存器的控制SVE 谓词寄存器位数计算SVE 谓词寄存器小结 SVE 谓词寄存器(predicate registers)简介 ARMv9的Scalable Vector Extension (SVE) 引入了谓词寄存器&#xff08;Predica…...

编程日记 2024/6/23 21:25:43

Python - 调用函数时检查参数的类型是否合规

前言 阅读本文大概需要3分钟 说明 在python中&#xff0c;即使加入了类型注解&#xff0c;使用注解之外的类型也是不报错的 def test(uid: int):print(uid)test("999")但是我就想要类型不对就直接报错确实可以另辟蹊径&#xff0c;实现报错&#xff0c;似乎有强…...

编程日记 2024/6/23 21:24:42

Python基础面试题解答

Python基础面试题解答 基础语法 1. Python中的变量是如何管理内存的&#xff1f; Python中的变量通过引用计数来管理内存。当一个变量被创建时&#xff0c;会分配一个内存地址&#xff0c;并记录引用次数。当引用次数变为0时&#xff0c;垃圾回收机制会自动释放该内存。 2.…...

编程日记 2024/6/23 21:22:40

MATLAB直方图中bin中心与bin边界之间的转换

要将 bin 中心转换为 bin 边界&#xff0c;请计算 centers 中各连续值之间的中点。 d diff(centers)/2; edges [centers(1)-d(1), centers(1:end-1)d, centers(end)d(end)];要将 bin 边界转换为bin 中心 bincenters binedges(1:end-1)diff(binedges)/2;...

编程日记 2024/6/23 21:20:38

Chromium 开发指南2024 Mac篇-开始编译Chromium（五）

1.引言 在之前的指南中&#xff0c;我们已经详细介绍了在 macOS 上编译和开发 Chromium 的准备工作。您学会了如何安装和配置 Xcode&#xff0c;如何下载和配置 depot_tools&#xff0c;以及如何获取 Chromium 的源代码。通过这些步骤&#xff0c;您的开发环境已经搭建完毕&am…...

编程日记 2024/6/23 21:16:34

2024.06.11校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 美团2025届北斗计划正式启动&#xff08;内推&#xff09; 校招 | 美团2025届北斗计划正式启动&#xff08;内推&#xff09; 2、实习 | 沃尔沃汽车 Open Day & 实习招聘 …...

编程日记 2024/6/23 21:15:32

linux 免密备份文件到另外一台服务器

简单说&#xff0c;A服务器备份到B服务器。就是将A服务器的文件复制传输到B服务器进行备份。这种场景可以应用到简单的定时器自动备份数据文件。 具体步骤&#xff1a; 1、A服务器上执行以下命令并一直按回车键&#xff0c;然后在/root/.ssh目录中可以看到私钥和公钥。其中id…...

编程日记 2024/6/23 21:14:28

【html】用html写一个博物馆首页

效果图&#xff1a; 二级导航&#xff1a; 源码&#xff1a; <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><l…...

编程日记 2024/6/23 21:12:27

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【13】压力压测JMeter-性能监控jvisualvm

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【13】压力压测JMeter-性能监控jvisualvm 压力测试概述性能指标 JMeter基本使用添加线程组添加 HTTP 请求添加监听器启动压测&查看分析结果JMeter Address Already in use 错误解决 性…...

编程日记 2024/6/23 21:11:25

【python】python海底捞门店营业数据分析与可视化（数据集+源码+论文）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…...

编程日记 2024/6/23 21:10:24

利用机器学习弄懂机器学习！

第一个问题&#xff1a;什么是机器学习&#xff1f; 机器学习是人工智能的一个子领域&#xff0c;它使计算机系统能够从经验中学习并改进其性能&#xff08;和人一样&#xff0c;人也是从经验当中&#xff0c;实现自己的不断地学习和提升&#xff09;。简单来说&#xff0c;机…...

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

Ubuntu22.04系统安装及配置

文章目录 一、选择“安装” 二、选择“语言” 三、安装器更新 四、键盘布局 五、选择安装类型 六、网络配置 七、代理设置 八、镜像地址 九、磁盘划分 十、设置用户名、主机名、登录密码 十一、升级到Ubuntu Pro 十二、SSH设置 十三、选装软件包 十四、开始安装进…...

编程日记 2024/6/23 21:05:19

抖音多功能全自动引流工具，支持评论关注私信留痕点赞等，让你的抖音粉丝暴涨！

随着短视频行业的火爆&#xff0c;越来越多的人开始关注抖音这个平台。然而&#xff0c;如何在抖音上获得更多的关注和粉丝&#xff0c;成为了许多人面临的难题。为了帮助大家解决这个问题&#xff0c;今天我们将为大家推荐一款抖音多功能全自动引流脚本&#xff0c;这款脚本可…...

编程日记 2024/6/23 21:03:17

day3-xss漏洞（米斯特web渗透测试）

day3-xss漏洞&#xff08;米斯特web渗透测试&#xff09; XSSXss种类三种反射型1.反射型xss2.存储型xss3.DOM型xss XSS Xss有一部分是前端的有一部分不是前端的&#xff0c;我们来看一下&#xff0c;昨天的HTML注入修复方法应灵活使用。 HTML注入是注入一段HTML&#xff0c;那…...

编程日记 2024/6/23 21:02:16

用Python和OpenCV手把手教你搞定自动驾驶图像坐标系转换（附NuScenes数据集实战代码）

用Python和OpenCV手把手教你搞定自动驾驶图像坐标系转换&#xff08;附NuScenes数据集实战代码&#xff09; 自动驾驶技术的核心在于让车辆"看懂"周围环境&#xff0c;而坐标系转换正是连接物理世界与数字世界的桥梁。想象一下&#xff0c;当一辆自动驾驶汽车行驶在…...

编程新知 2026/5/17 10:57:32

深入Transformer内部：LoRA到底改动了哪部分权重才让模型“学会”新任务？

深入Transformer内部&#xff1a;LoRA如何通过低秩更新重塑大模型能力 在自然语言处理领域&#xff0c;大型预训练模型的微调一直是个计算密集型任务。传统全参数微调需要更新数十亿甚至数千亿参数&#xff0c;这对大多数研究者和企业来说都是难以承受的负担。低秩适应(LoRA)技…...

编程新知 2026/5/17 9:00:16

终极指南：如何用BabelDOC彻底解决PDF翻译格式错乱问题

终极指南&#xff1a;如何用BabelDOC彻底解决PDF翻译格式错乱问题 【免费下载链接】BabelDOC Yet Another Document Translator 项目地址: https://gitcode.com/GitHub_Trending/ba/BabelDOC 还在为学术论文翻译后排版全乱而烦恼吗&#xff1f;&#x1f62b; 技术文档翻…...

编程新知 2026/5/17 7:53:56

如何快速掌握阴阳师自动化脚本：OAS解放双手的完整教程

如何快速掌握阴阳师自动化脚本&#xff1a;OAS解放双手的完整教程 【免费下载链接】OnmyojiAutoScript Onmyoji Auto Script | 阴阳师脚本 项目地址: https://gitcode.com/gh_mirrors/on/OnmyojiAutoScript 阴阳师自动化脚本&#xff08;Onmyoji Auto Script&#xff0c…...

编程新知 2026/5/17 7:49:54

构建高可用AI模型代理服务：统一接口、智能路由与生产级部署

1. 项目概述&#xff1a;一个无处不在的AI助手接口最近在折腾AI应用开发的朋友&#xff0c;可能都遇到过这样一个痛点&#xff1a;想在自己的项目里快速接入一个靠谱的、能处理复杂对话的AI模型&#xff0c;但要么被OpenAI的API调用限制和网络问题搞得焦头烂额&#xff0c;要么…...

编程新知 2026/5/17 7:09:58

深入解析go-containerregistry：无守护进程的容器镜像操作利器

1. 项目概述&#xff1a;容器镜像的“瑞士军刀”如果你在容器化这条路上已经走了一段时间&#xff0c;那么对“镜像”这个概念一定不会陌生。无论是 Docker Hub 上的nginx:latest&#xff0c;还是你公司私有仓库里的myapp:v1.2.3&#xff0c;这些镜像都是容器世界的基石。但你是…...

编程新知 2026/5/17 7:01:44

告别命令行启动！在Ubuntu 20.04上为Clion创建桌面快捷方式的保姆级教程

告别命令行启动&#xff01;在Ubuntu 20.04上为Clion创建桌面快捷方式的保姆级教程 每次打开Clion都要在终端输入./clion.sh&#xff1f;作为从Windows转战Linux的开发者&#xff0c;这种操作简直让人抓狂。本文将彻底解决这个痛点&#xff0c;手把手教你用.desktop文件创建专业…...

编程新知 2026/5/17 3:10:54

STM32F407最小系统板DIY全记录：从原理图绘制到PCB打样，手把手带你复刻一块自己的核心板

STM32F407最小系统板DIY全记录&#xff1a;从原理图绘制到PCB打样&#xff0c;手把手带你复刻一块自己的核心板 1. 项目规划与芯片选型 在开始动手之前&#xff0c;我们需要明确几个关键问题&#xff1a;为什么要选择STM32F407&#xff1f;这个芯片适合哪些应用场景&#xff1f…...

编程新知 2026/5/17 3:00:24

如何用Kafka-King轻松管理Kafka集群：5分钟上手完整指南

如何用Kafka-King轻松管理Kafka集群&#xff1a;5分钟上手完整指南 【免费下载链接】Kafka-King A modern and practical kafka GUI client &#x1f495;&#x1f389;Kafka-King 是一款现代化、实用的 Kafka GUI 客户端&#xff0c;旨在通过直观的桌面界面简化 Apache Kafka …...

编程新知 2026/5/17 2:43:35

用Git和Markdown构建个人知识库：Wandercode项目实践指南

1. 项目概述&#xff1a;从“漫游代码”到个人知识管理系统的蜕变最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“Wandercode”&#xff0c;直译过来就是“漫游代码”。乍一看这个标题&#xff0c;可能会让人联想到某种代码生成器或者自动化脚本工具。但当我深入探究其仓…...

编程新知 2026/5/17 2:41:03