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

html做一个画热图的软件

news 2025/7/3 16:49:56

完整示例

<!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>

说明

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