完整示例
<!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">中。
使用方法
- 将上述代码保存为一个HTML文件（例如
heatmap_generator.html）。 - 在浏览器中打开该文件。
- 在文本区域中输入数据，每行代表一行数据，数据项之间用逗号分隔。例如：
1,20,30
20,1,60
30,60,1
- 点击“生成热图”按钮，热图将会显示在页面中。
