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 {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. 点击“生成热图”按钮,热图将会显示在页面中。

在这里插入图片描述

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

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

相关文章

7-3 设计一个学生类

定义一个学生类Student&#xff0c;有姓名&#xff08;name&#xff09;、成绩&#xff08;score&#xff09;两个私有属性&#xff0c;提供一个无参数的构造方法、一个带参数的构造方法&#xff0c;以及四个公有方法getName()、setName()、getScore()、setScore ()分别用于获取…

A.P.穆勒-马士基将作为银牌赞助商出席2024中国汽车供应链降碳和可持续国际峰会

作为一家综合性集装箱物流公司&#xff0c;A.P.穆勒-马士基致力于连接和简化我们客户的供应链。作为物流服务领域的全球领导者&#xff0c;公司拥有100,000多家客户&#xff0c;业务遍及130多个国家&#xff0c;拥有约80,000名员工。A.P.穆勒-马士基致力于通过新技术、新船舶和…

React的状态提升和组合

React的状态提升 通常&#xff0c;多个组件需要反映相同的变化数据&#xff0c;这时我们建议将共享状态提升到最近的共同父组件中去 示例&#xff1a; 我们写一个关于热水沸腾的组件&#xff0c;当我们在输入框输入的温度大于100度时&#xff0c;文字会显示热水沸腾。这样有…

Syslog日志外发

Syslog是一种广泛应用于网络设备、操作系统和应用程序的日志通信协议&#xff0c;通过收集、监控和分析Syslog日志&#xff0c;企业可以有效维护网络安全、故障排除和运营管理。 除了内部监控&#xff0c;有时企业也需要将Syslog日志外发以实现更多的管理和合规需求。在实现Sy…

代码随想录算法训练营DAY45|198.打家劫舍、213.打家劫舍II、337.打家劫舍 III

198.打家劫舍 题目链接&#xff1a;198.打家劫舍 class Solution(object):def rob(self, nums):""":type nums: List[int]:rtype: int"""if len(nums)1:return nums[0]if len(nums)2:return max(nums[0],nums[1])dp[0]*len(nums)dp[0]nums[0]d…

java类中的代码块

代码块&#xff08;初始化块&#xff09;&#xff1a;一般用于初始化数据 1、静态代码块执行优先于非静态代码块 2、类中可以存在多个静态/非静态代码块&#xff0c;且相同类型代码块之间按照声明顺序来执行 静态代码块&#xff1a;static {} ① 随着类的加载而执行 ② 只执行一…

cpu漏洞修复

关于CPU相关漏洞的修复处理_cpu漏洞如何修复 vulnerability spec store bypass: vulnera-CSDN博客

网络编程及练习

定义&#xff1a; 在网络通信协议下&#xff0c;不同计算机上运行的程序进行的数据传输。计算机和计算机之间通过网络进行数据传输 可以使用在java.net包下的技术开发出常见的网络应用程序 常见的软件架构&#xff1a; C/S: Client/Server 客户端/服务器 在用户本地需要下载…

打破数据分析壁垒:SPSS复习必备(四)

一、连续性变量的统计描述与参数估计 1、集中趋势的描述指标 均数&#xff08;Mean&#xff09; 中位数&#xff08;Median&#xff09; 众数&#xff08;Mode&#xff09; 总合&#xff08;Sum&#xff09; 2、离散趋势的描述指标 标准差&#xff08;Std. Deviation&#x…

STM32CubeMX WS2812B灯驱动

一、WS2812B 数据发送速度可达800Kbps。 数据协议采用单线归零码的通讯方式&#xff0c;像素点在上电复位以后&#xff0c;DIN端接受从控制器传输过来的数据&#xff0c;首先送过来的24bit数据被第一个像素点提取后&#xff0c;送到像素点内部的数据锁存器&#xff0c;剩余的…

openssl 命令行生成密钥对,生成hash,PSS填充签名,校验

生成密钥对 openssl genpkey -algorithm RSA -out private_key.pem -pkeyopt rsa_keygen_bits:4096 openssl rsa -pubout -in private_key.pem -out public_key.pem将源文件data.txt生成hash值&#xff08;sha-256&#xff09; openssl dgst -sha256 -binary data.txt > d…

MySQL进阶——SQL优化

目录 1插入数据 1.1 insert 1.2大批量插入数据 2主键优化 3 order by 优化 4 group by 优化 5 limit 优化 6 count 优化 6.1概述 6.2 count用法 7 update优化 1插入数据 1.1 insert 优化方案主要有3种 批量插入数据 Insert into tb_test values(1,Tom),(2,Cat)…

QT 数值型坐标轴有那些?(QValueAxis)

在Qt中&#xff0c;QValueAxis类用于表示数值型坐标轴&#xff0c;它本身没有直接的子类&#xff0c;但它是从QAbstractAxis这个抽象类继承而来的。QAbstractAxis是定义坐标轴属性和行为的基类&#xff0c;而QValueAxis则在此基础上提供了针对数值数据的具体实现。 Qt的图表模…

HarmonyOS开发知识 :扩展修饰器,实现节流、防抖、权限申请

引言 防重复点击&#xff0c;利用装饰器面向切面&#xff08;AOP&#xff09;的特性结合闭包&#xff0c;实现节流、防抖和封装权限申请。 节流 节流是忽略操作&#xff0c;在触发事件时&#xff0c;立即执行目标操作&#xff0c;如果在指定的时间区间内再次触发了事件&…

linux修改root密码

linux修改root密码 在Linux中&#xff0c;可以使用以下几种方法来修改root密码&#xff1a; 方法1&#xff1a;使用passwd命令 该方法是最常见和最简单的方法&#xff0c;使用passwd命令可以直接修改root用户的密码。在终端中执行以下命令&#xff1a; sudo passwd root 系统…

移动端 UI 风格,彰显不凡

移动端 UI 风格&#xff0c;彰显不凡

【车载AI音视频电脑】4/8路AHD 200万像素车载电脑SD卡录像机

产品主要特点&#xff1a; -支持4路实时高清AHD 1080P录像 -SD卡记录数据&#xff08;可支持2张大容量SD卡,最大支持单张256G&#xff09; -支持GPS全球定位, 可选模块 -支持WIFI高速自动下载功能, 可选模块 -内置3/4G模块&#xff0c;实时预览和远程管理&#xff0c; 可选…

汇凯金业:现货黄金投资平仓策略有哪些

现货黄金作为全球投资者广泛关注与参与的财富增值途径&#xff0c;其双向交易制度为市场参与者在不同行情下提供了盈利的可能。然而&#xff0c;如何在波动的市场中把握最佳的平仓时机&#xff0c;从而最大化收益&#xff0c;是所有投资者心中的疑问。正确的平仓策略可以说是现…

YYU系列电子引伸计

型号&#xff1a; YYU-50/10 YYU-50/25 YYU-25/10 YYU-100/10 YYU-100/25 轴向变形引伸计&#xff0c;适用于金属非金属材料的测试。用于测量弹性模量、规定非比例延伸强度、规定总延伸强度、各种延伸率、应变硬化指数等参数。 技术参数 1、应变片阻值&#xff1a;350欧…

vue+echarts ----中国地图 下拉选择省份地图中的省份区域高亮显示以及飞线图的效果

vueecharts ----中国地图 下拉选择省份地图中的省份区域高亮显示以及飞线图的效果 1、父组件核心代码&#xff1a;【/utils/area的详细数据】、【/utils/china详细数据】 <template><div class"center"><div class"digital"><el-se…