bugfix: fix bug when switch between dark mode and light mode
This commit is contained in:
parent
868e0d583e
commit
440fcb10ef
217
index.html
217
index.html
@ -14,6 +14,7 @@
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class', // 启用Tailwind暗黑模式
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
@ -81,16 +82,16 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">
|
||||
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="bg-white shadow-sm sticky top-0 z-50">
|
||||
<header class="bg-white shadow-sm sticky top-0 z-50 dark:bg-gray-800 transition-colors duration-300">
|
||||
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="fa fa-area-chart text-primary text-2xl"></i>
|
||||
<h1 class="text-xl font-semibold">矩阵热力图可视化工具</h1>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
|
||||
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||
<i class="fa fa-moon-o"></i>
|
||||
</button>
|
||||
<button class="hidden md:flex items-center space-x-1 bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
|
||||
@ -106,21 +107,21 @@
|
||||
<!-- 介绍部分 -->
|
||||
<section class="mb-8 text-center max-w-3xl mx-auto">
|
||||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">简单直观的矩阵热力图生成器</h2>
|
||||
<p class="text-gray-600 mb-6">上传您的NumPy(.npy)或CSV文件，或直接粘贴CSV格式的矩阵数据，立即生成交互式热力图，数值越大颜色越深</p>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-6">上传您的NumPy(.npy)或CSV文件，或直接粘贴CSV格式的矩阵数据，立即生成交互式热力图，数值越大颜色越深</p>
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-8">
|
||||
<div class="flex items-center bg-blue-50 text-primary px-3 py-1.5 rounded-full text-sm">
|
||||
<div class="flex items-center bg-blue-50 dark:bg-blue-900/30 text-primary px-3 py-1.5 rounded-full text-sm">
|
||||
<i class="fa fa-check-circle mr-1.5"></i> 支持NumPy和CSV格式
|
||||
</div>
|
||||
<div class="flex items-center bg-blue-50 text-primary px-3 py-1.5 rounded-full text-sm">
|
||||
<div class="flex items-center bg-blue-50 dark:bg-blue-900/30 text-primary px-3 py-1.5 rounded-full text-sm">
|
||||
<i class="fa fa-check-circle mr-1.5"></i> 支持直接粘贴CSV数据
|
||||
</div>
|
||||
<div class="flex items-center bg-blue-50 text-primary px-3 py-1.5 rounded-full text-sm">
|
||||
<div class="flex items-center bg-blue-50 dark:bg-blue-900/30 text-primary px-3 py-1.5 rounded-full text-sm">
|
||||
<i class="fa fa-check-circle mr-1.5"></i> 实时可视化
|
||||
</div>
|
||||
<div class="flex items-center bg-blue-50 text-primary px-3 py-1.5 rounded-full text-sm">
|
||||
<div class="flex items-center bg-blue-50 dark:bg-blue-900/30 text-primary px-3 py-1.5 rounded-full text-sm">
|
||||
<i class="fa fa-check-circle mr-1.5"></i> 可下载结果
|
||||
</div>
|
||||
<div class="flex items-center bg-blue-50 text-primary px-3 py-1.5 rounded-full text-sm">
|
||||
<div class="flex items-center bg-blue-50 dark:bg-blue-900/30 text-primary px-3 py-1.5 rounded-full text-sm">
|
||||
<i class="fa fa-check-circle mr-1.5"></i> 响应式设计
|
||||
</div>
|
||||
</div>
|
||||
@ -128,21 +129,21 @@
|
||||
|
||||
<!-- 文件上传区域 -->
|
||||
<section class="max-w-4xl mx-auto mb-12">
|
||||
<div id="drop-area" class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center bg-white upload-shadow card-hover">
|
||||
<div id="drop-area" class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-8 text-center bg-white dark:bg-gray-800 upload-shadow card-hover transition-colors duration-300">
|
||||
<i class="fa fa-cloud-upload text-4xl text-primary mb-4"></i>
|
||||
<h3 class="text-xl font-medium mb-2">拖放您的文件到此处</h3>
|
||||
<p class="text-gray-500 mb-6">支持 .npy (NumPy) 或 .csv 格式</p>
|
||||
<p class="text-gray-500 dark:text-gray-400 mb-6">支持 .npy (NumPy) 或 .csv 格式</p>
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<label for="file-input" class="bg-primary text-white px-6 py-3 rounded-lg cursor-pointer hover:bg-primary/90 transition-colors inline-flex items-center justify-center">
|
||||
<i class="fa fa-file-text-o mr-2"></i>
|
||||
选择文件
|
||||
<input type="file" id="file-input" class="hidden" accept=".npy,.csv" />
|
||||
</label>
|
||||
<button id="paste-data-btn" class="bg-gray-200 text-dark px-6 py-3 rounded-lg hover:bg-gray-300 transition-colors inline-flex items-center justify-center">
|
||||
<button id="paste-data-btn" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-6 py-3 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors inline-flex items-center justify-center">
|
||||
<i class="fa fa-clipboard mr-2"></i>
|
||||
粘贴CSV数据
|
||||
</button>
|
||||
<button id="example-btn" class="bg-gray-200 text-dark px-6 py-3 rounded-lg hover:bg-gray-300 transition-colors inline-flex items-center justify-center">
|
||||
<button id="example-btn" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-6 py-3 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors inline-flex items-center justify-center">
|
||||
<i class="fa fa-lightbulb-o mr-2"></i>
|
||||
使用示例数据
|
||||
</button>
|
||||
@ -150,17 +151,17 @@
|
||||
|
||||
<!-- CSV数据粘贴区域 -->
|
||||
<div id="csv-paste-area" class="mt-6 hidden">
|
||||
<div class="border border-gray-300 rounded-lg overflow-hidden">
|
||||
<div class="bg-gray-50 px-4 py-2 flex justify-between items-center border-b border-gray-300">
|
||||
<h4 class="font-medium text-gray-800">粘贴CSV数据</h4>
|
||||
<button id="close-paste-area" class="text-gray-400 hover:text-gray-600">
|
||||
<div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
|
||||
<div class="bg-gray-50 dark:bg-gray-700 px-4 py-2 flex justify-between items-center border-b border-gray-300 dark:border-gray-600">
|
||||
<h4 class="font-medium text-gray-800 dark:text-gray-200">粘贴CSV数据</h4>
|
||||
<button id="close-paste-area" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
||||
<i class="fa fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<textarea id="csv-textarea" class="w-full h-40 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none resize-none" placeholder="在此粘贴CSV格式的矩阵数据，每行代表矩阵的一行，用逗号分隔各元素..."></textarea>
|
||||
<textarea id="csv-textarea" class="w-full h-40 p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none resize-none bg-white dark:bg-gray-700 transition-colors duration-300" placeholder="在此粘贴CSV格式的矩阵数据，每行代表矩阵的一行，用逗号分隔各元素..."></textarea>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-2 border-t border-gray-300 flex justify-end">
|
||||
<div class="bg-gray-50 dark:bg-gray-700 px-4 py-2 border-t border-gray-300 dark:border-gray-600 flex justify-end">
|
||||
<button id="parse-csv-btn" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors inline-flex items-center">
|
||||
<i class="fa fa-table mr-2"></i>
|
||||
解析数据
|
||||
@ -171,27 +172,27 @@
|
||||
</div>
|
||||
|
||||
<!-- 文件信息区域 -->
|
||||
<div id="file-info" class="hidden mt-6 p-4 bg-white rounded-xl upload-shadow">
|
||||
<div id="file-info" class="hidden mt-6 p-4 bg-white dark:bg-gray-800 rounded-xl upload-shadow transition-colors duration-300">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-start space-x-3">
|
||||
<div id="file-icon" class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-primary">
|
||||
<div id="file-icon" class="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-primary">
|
||||
<i class="fa fa-file-text-o"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 id="file-name" class="font-medium text-gray-800">文件名.csv</h4>
|
||||
<p id="file-size" class="text-sm text-gray-500">文件大小: 123 KB</p>
|
||||
<h4 id="file-name" class="font-medium text-gray-800 dark:text-gray-200">文件名.csv</h4>
|
||||
<p id="file-size" class="text-sm text-gray-500 dark:text-gray-400">文件大小: 123 KB</p>
|
||||
</div>
|
||||
</div>
|
||||
<button id="remove-file" class="text-gray-400 hover:text-red-500 transition-colors">
|
||||
<button id="remove-file" class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors">
|
||||
<i class="fa fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据预览 -->
|
||||
<div class="mt-4">
|
||||
<h5 class="font-medium text-gray-700 mb-2">数据预览</h5>
|
||||
<div id="data-preview" class="overflow-x-auto bg-gray-50 p-3 rounded-lg max-h-40">
|
||||
<p class="text-gray-500 italic">加载中...</p>
|
||||
<h5 class="font-medium text-gray-700 dark:text-gray-300 mb-2">数据预览</h5>
|
||||
<div id="data-preview" class="overflow-x-auto bg-gray-50 dark:bg-gray-700 p-3 rounded-lg max-h-40">
|
||||
<p class="text-gray-500 dark:text-gray-400 italic">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -199,7 +200,7 @@
|
||||
|
||||
<!-- 热力图展示区域 -->
|
||||
<section id="heatmap-section" class="max-w-6xl mx-auto mb-12 hidden">
|
||||
<div class="bg-white rounded-xl upload-shadow p-6">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-xl upload-shadow p-6 transition-colors duration-300">
|
||||
<div class="flex flex-wrap justify-between items-center mb-6">
|
||||
<h3 class="text-xl font-semibold">矩阵热力图</h3>
|
||||
<div class="flex space-x-3 mt-2 sm:mt-0">
|
||||
@ -207,7 +208,7 @@
|
||||
<i class="fa fa-download mr-2"></i>
|
||||
下载PNG
|
||||
</button>
|
||||
<button id="toggle-view" class="bg-gray-200 text-dark px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors inline-flex items-center">
|
||||
<button id="toggle-view" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors inline-flex items-center">
|
||||
<i class="fa fa-table mr-2"></i>
|
||||
表格视图
|
||||
</button>
|
||||
@ -220,27 +221,27 @@
|
||||
<!-- 表格视图 (默认隐藏) -->
|
||||
<div id="table-container" class="hidden mt-8">
|
||||
<div class="overflow-x-auto max-h-[600px] overflow-y-auto"> <!-- 添加了max-h和overflow-y -->
|
||||
<table id="data-table" class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50 sticky top-0"> <!-- 添加sticky定位使表头固定 -->
|
||||
<table id="data-table" class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead class="bg-gray-50 dark:bg-gray-700 sticky top-0"> <!-- 添加sticky定位使表头固定 -->
|
||||
<tr id="table-header"></tr>
|
||||
</thead>
|
||||
<tbody id="table-body" class="bg-white divide-y divide-gray-200"></tbody>
|
||||
<tbody id="table-body" class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<p class="text-sm text-gray-500">矩阵大小</p>
|
||||
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg transition-colors duration-300">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">矩阵大小</p>
|
||||
<p id="matrix-shape" class="text-xl font-semibold">0 x 0</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<p class="text-sm text-gray-500">最大值</p>
|
||||
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg transition-colors duration-300">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">最大值</p>
|
||||
<p id="matrix-max" class="text-xl font-semibold">0</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<p class="text-sm text-gray-500">最小值</p>
|
||||
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg transition-colors duration-300">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">最小值</p>
|
||||
<p id="matrix-min" class="text-xl font-semibold">0</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -248,43 +249,43 @@
|
||||
</section>
|
||||
|
||||
<!-- 使用说明 -->
|
||||
<section class="max-w-4xl mx-auto bg-white rounded-xl upload-shadow p-6 mb-12">
|
||||
<section class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl upload-shadow p-6 mb-12 transition-colors duration-300">
|
||||
<h3 class="text-xl font-semibold mb-4">使用说明</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start">
|
||||
<div class="bg-blue-100 rounded-full p-2 mt-1 mr-3">
|
||||
<div class="bg-blue-100 dark:bg-blue-900/30 rounded-full p-2 mt-1 mr-3">
|
||||
<i class="fa fa-1 text-primary"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-medium text-gray-800">准备您的数据</h4>
|
||||
<p class="text-gray-600">您可以上传NumPy(.npy)文件、CSV文件，或直接粘贴CSV格式的矩阵数据。CSV文件或粘贴的数据应该是纯数值矩阵，不包含表头。</p>
|
||||
<h4 class="font-medium text-gray-800 dark:text-gray-200">准备您的数据</h4>
|
||||
<p class="text-gray-600 dark:text-gray-300">您可以上传NumPy(.npy)文件、CSV文件，或直接粘贴CSV格式的矩阵数据。CSV文件或粘贴的数据应该是纯数值矩阵，不包含表头。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="bg-blue-100 rounded-full p-2 mt-1 mr-3">
|
||||
<div class="bg-blue-100 dark:bg-blue-900/30 rounded-full p-2 mt-1 mr-3">
|
||||
<i class="fa fa-2 text-primary"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-medium text-gray-800">上传文件或粘贴数据</h4>
|
||||
<p class="text-gray-600">通过拖放、点击"选择文件"按钮上传您的数据文件，或点击"粘贴CSV数据"按钮直接粘贴矩阵数据。</p>
|
||||
<h4 class="font-medium text-gray-800 dark:text-gray-200">上传文件或粘贴数据</h4>
|
||||
<p class="text-gray-600 dark:text-gray-300">通过拖放、点击"选择文件"按钮上传您的数据文件，或点击"粘贴CSV数据"按钮直接粘贴矩阵数据。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="bg-blue-100 rounded-full p-2 mt-1 mr-3">
|
||||
<div class="bg-blue-100 dark:bg-blue-900/30 rounded-full p-2 mt-1 mr-3">
|
||||
<i class="fa fa-3 text-primary"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-medium text-gray-800">查看热力图</h4>
|
||||
<p class="text-gray-600">上传或粘贴成功后，系统会自动生成热力图，颜色越深表示数值越大。</p>
|
||||
<h4 class="font-medium text-gray-800 dark:text-gray-200">查看热力图</h4>
|
||||
<p class="text-gray-600 dark:text-gray-300">上传或粘贴成功后，系统会自动生成热力图，颜色越深表示数值越大。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="bg-blue-100 rounded-full p-2 mt-1 mr-3">
|
||||
<div class="bg-blue-100 dark:bg-blue-900/30 rounded-full p-2 mt-1 mr-3">
|
||||
<i class="fa fa-4 text-primary"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-medium text-gray-800">交互与导出</h4>
|
||||
<p class="text-gray-600">您可以在热力图上悬停查看详细数值，切换表格视图，或下载热力图为PNG格式。</p>
|
||||
<h4 class="font-medium text-gray-800 dark:text-gray-200">交互与导出</h4>
|
||||
<p class="text-gray-600 dark:text-gray-300">您可以在热力图上悬停查看详细数值，切换表格视图，或下载热力图为PNG格式。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -292,7 +293,7 @@
|
||||
</main>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-dark text-white py-8">
|
||||
<footer class="bg-gray-800 dark:bg-gray-900 text-white py-8 transition-colors duration-300">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div>
|
||||
@ -324,7 +325,7 @@
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-center text-gray-400">
|
||||
<i class="fa fa-envelope-o mr-2"></i>
|
||||
<a href="feng-arch@outlook.com" class="hover:text-white transition-colors">support@heatmap-tool.com</a>
|
||||
<a href="mailto:support@heatmap-tool.com" class="hover:text-white transition-colors">support@heatmap-tool.com</a>
|
||||
</li>
|
||||
<li class="flex items-center text-gray-400">
|
||||
<i class="fa fa-github mr-2"></i>
|
||||
@ -376,23 +377,18 @@
|
||||
|
||||
// 主题切换
|
||||
themeToggle.addEventListener('click', () => {
|
||||
document.body.classList.toggle('dark');
|
||||
if (document.body.classList.contains('dark')) {
|
||||
document.documentElement.classList.toggle('dark');
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
|
||||
if (isDark) {
|
||||
themeToggle.innerHTML = '<i class="fa fa-sun-o"></i>';
|
||||
document.body.classList.add('bg-gray-900', 'text-white');
|
||||
document.body.classList.remove('bg-gray-50', 'text-dark');
|
||||
// 更新热力图主题
|
||||
if (plotlyInstance) {
|
||||
updateHeatmapTheme();
|
||||
}
|
||||
} else {
|
||||
themeToggle.innerHTML = '<i class="fa fa-moon-o"></i>';
|
||||
document.body.classList.remove('bg-gray-900', 'text-white');
|
||||
document.body.classList.add('bg-gray-50', 'text-dark');
|
||||
// 更新热力图主题
|
||||
if (plotlyInstance) {
|
||||
updateHeatmapTheme();
|
||||
}
|
||||
}
|
||||
|
||||
// 更新热力图主题
|
||||
if (plotlyInstance) {
|
||||
updateHeatmapTheme();
|
||||
}
|
||||
});
|
||||
|
||||
@ -579,7 +575,7 @@
|
||||
return row.slice(0, 5).map(val => val.toFixed(2)).join(', ') + (row.length > 5 ? ', ...' : '');
|
||||
}).join('<br>');
|
||||
|
||||
dataPreview.innerHTML = `<pre>${preview}${matrixData.length > 5 ? '<br>...' : ''}</pre>`;
|
||||
dataPreview.innerHTML = `<pre class="text-gray-800 dark:text-gray-200">${preview}${matrixData.length > 5 ? '<br>...' : ''}</pre>`;
|
||||
|
||||
// 计算统计信息
|
||||
const flatData = matrixData.flat();
|
||||
@ -600,39 +596,39 @@
|
||||
// 滚动到热力图
|
||||
heatmapSection.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
// 更新热力图主题（添加实例存在性检查）
|
||||
function updateHeatmapTheme(layout = {}) {
|
||||
// 关键：检查实例是否存在，不存在则直接返回
|
||||
if (!matrixData || !plotlyInstance || !heatmapContainer._fullLayout) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新热力图主题
|
||||
function updateHeatmapTheme() {
|
||||
if (!matrixData || !plotlyInstance) return;
|
||||
|
||||
const isDark = document.body.classList.contains('dark');
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
|
||||
// 更新布局
|
||||
const updatedLayout = {
|
||||
...layout,
|
||||
font: {
|
||||
color: isDark ? 'white' : 'black'
|
||||
const textColor = isDark ? 'white' : 'black';
|
||||
const bgColor = isDark ? '#1F2937' : 'white';
|
||||
|
||||
Plotly.relayout(heatmapContainer, {
|
||||
paper_bgcolor: bgColor,
|
||||
plot_bgcolor: bgColor,
|
||||
font: { color: textColor },
|
||||
xaxis: { color: textColor },
|
||||
yaxis: { color: textColor },
|
||||
colorbar: {
|
||||
tickcolor: textColor,
|
||||
titlefont: { color: textColor }
|
||||
},
|
||||
paper_bgcolor: isDark ? '#111827' : 'white',
|
||||
plot_bgcolor: isDark ? '#111827' : 'white'
|
||||
};
|
||||
|
||||
// 仅在实例有效时调用relayout
|
||||
Plotly.relayout(heatmapContainer, updatedLayout);
|
||||
titlefont: { color: textColor }
|
||||
});
|
||||
}
|
||||
|
||||
// 创建热力图（调整异步顺序）
|
||||
|
||||
// 创建热力图
|
||||
function createHeatmap() {
|
||||
if (!matrixData) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 先销毁现有图表（如果存在）
|
||||
// 先销毁现有图表
|
||||
if (plotlyInstance) {
|
||||
Plotly.purge(heatmapContainer);
|
||||
plotlyInstance = null; // 显式清空实例
|
||||
}
|
||||
|
||||
// 转置矩阵，使第一个索引对应y轴，第二个索引对应x轴
|
||||
@ -656,28 +652,37 @@
|
||||
hovertemplate: '坐标: (%{x}, %{y})<br>值: %{z:.4f}<extra></extra>'
|
||||
}];
|
||||
|
||||
// 基础布局配置（不含主题相关）
|
||||
// 基础布局配置
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
const textColor = isDark ? 'white' : 'black';
|
||||
const bgColor = isDark ? '#1F2937' : 'white';
|
||||
|
||||
const layout = {
|
||||
title: '矩阵热力图',
|
||||
xaxis: { title: '行', showgrid: false, ticks: '', automargin: true },
|
||||
yaxis: { title: '列', showgrid: false, ticks: '', automargin: true, scaleanchor: 'x', scaleratio: 1 },
|
||||
xaxis: { title: '行', showgrid: false, ticks: '', automargin: true, color: textColor },
|
||||
yaxis: { title: '列', showgrid: false, ticks: '', automargin: true, scaleanchor: 'x', scaleratio: 1, color: textColor },
|
||||
margin: { l: 60, r: 60, t: 60, b: 60 },
|
||||
paper_bgcolor: 'rgba(0,0,0,0)',
|
||||
plot_bgcolor: 'rgba(0,0,0,0)'
|
||||
paper_bgcolor: bgColor,
|
||||
plot_bgcolor: bgColor,
|
||||
font: { color: textColor },
|
||||
colorbar: {
|
||||
titlefont: { color: textColor },
|
||||
tickcolor: textColor
|
||||
},
|
||||
titlefont: { color: textColor }
|
||||
};
|
||||
|
||||
// 创建热力图（异步操作）
|
||||
// 创建热力图
|
||||
Plotly.newPlot(heatmapContainer, heatmapData, layout)
|
||||
.then(instance => {
|
||||
plotlyInstance = instance; // 实例创建成功后再赋值
|
||||
updateHeatmapTheme(); // 确保实例存在后再更新主题
|
||||
plotlyInstance = instance;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('热力图创建失败:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// 创建表格视图
|
||||
// 修改创建表格视图的函数
|
||||
function createTableView() {
|
||||
if (!matrixData) {
|
||||
return;
|
||||
@ -687,19 +692,19 @@
|
||||
tableHeader.innerHTML = '';
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
// 添加表头（不限制列数）
|
||||
let headerHtml = '<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">行/列</th>';
|
||||
// 添加表头
|
||||
let headerHtml = '<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider sticky left-0 bg-gray-50 dark:bg-gray-700 z-10">行/列</th>';
|
||||
for (let j = 0; j < matrixData[0].length; j++) {
|
||||
headerHtml += `<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">${j}</th>`;
|
||||
headerHtml += `<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">${j}</th>`;
|
||||
}
|
||||
tableHeader.innerHTML = headerHtml;
|
||||
|
||||
// 添加表格内容（不限制行数）
|
||||
// 添加表格内容
|
||||
const maxVal = Math.max(...matrixData.flat());
|
||||
const minVal = Math.min(...matrixData.flat());
|
||||
|
||||
// 为大表格添加渲染优化
|
||||
const fragment = document.createDocumentFragment(); // 使用文档片段减少DOM重绘
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
for (let i = 0; i < matrixData.length; i++) {
|
||||
const row = matrixData[i];
|
||||
@ -707,7 +712,7 @@
|
||||
|
||||
// 添加行号
|
||||
const rowHeader = document.createElement('th');
|
||||
rowHeader.className = 'px-4 py-3 text-left text-sm font-medium text-gray-900 sticky left-0 bg-gray-50 z-10'; // 行号固定
|
||||
rowHeader.className = 'px-4 py-3 text-left text-sm font-medium text-gray-900 dark:text-gray-200 sticky left-0 bg-gray-50 dark:bg-gray-700 z-10';
|
||||
rowHeader.textContent = i;
|
||||
rowHtml.appendChild(rowHeader);
|
||||
|
||||
@ -819,4 +824,4 @@
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user