Heatmap Chart - clawam tools

Werkzeuge Dokumente Daoark EN Startseite Startseite / Datenkonvertierung › Startseite manifest.json 0; }); var matrix = []; for (var i = 0; i < lines.length; i++) { var parts = lines[i].split(/[\s,;\t]+/).filter(function(x) { return x.length > 0; }); var row = []; for (var j = 0; j < parts.length; j++) { var v = parseFloat(parts[j]); if (!isNaN(v)) row.push(v); } if (row.length > 0) matrix.push(row); } return matrix; } function escape(s) { return String(s).replace(/[&<>"']/g, function(c) { return {'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]; }); } // 冷到暖色阶(蓝-青-绿-黄-红) function color(v) { // v: 0-1 var r, g, b; if (v < 0.25) { var t = v / 0.25; r = Math.round(59 + (96 - 59) * t); g = Math.round(130 + (200 - 130) * t); b = Math.round(246 + (220 - 246) * t); } else if (v < 0.5) { var t = (v - 0.25) / 0.25; r = Math.round(96 + (16 - 96) * t); g = Math.round(200 + (185 - 200) * t); b = Math.round(220 + (129 - 220) * t); } else if (v < 0.75) { var t = (v - 0.5) / 0.25; r = Math.round(16 + (245 - 16) * t); g = Math.round(185 + (158 - 185) * t); b = Math.round(129 + (11 - 129) * t); } else { var t = (v - 0.75) / 0.25; r = Math.round(245 + (239 - 245) * t); g = Math.round(158 + (68 - 158) * t); b = Math.round(11 + (68 - 11) * t); } return 'rgb(' + r + ',' + g + ',' + b + ')'; } function renderHeatmap(matrix, colLabels, rowLabels, title) { if (matrix.length === 0) return ''; var rows = matrix.length; var cols = matrix[0].length; var minV = Infinity, maxV = -Infinity; for (var i = 0; i < rows; i++) for (var j = 0; j < cols; j++) { if (matrix[i][j] < minV) minV = matrix[i][j]; if (matrix[i][j] > maxV) maxV = matrix[i][j]; } if (minV === maxV) maxV = minV + 1; var cellW = 60, cellH = 40; var padL = 80, padT = 50, padB = 30, padR = 80; var W = padL + cols * cellW + padR; var H = padT + rows * cellH + padB; var svg = ''; return svg; } var currentSVG = ''; function doProcess() { try { var textA = getVal('text-a'); if (!textA) { showError('请输入'); return; } var colLabels = getVal('col-labels').split(',').map(function(s) { return s.trim(); }).filter(function(s) { return s.length > 0; }); var rowLabels = getVal('row-labels').split(',').map(function(s) { return s.trim(); }).filter(function(s) { return s.length > 0; }); var title = getVal('title'); var matrix = parseMatrix(textA); if (matrix.length === 0) { showError('无有效矩阵'); return; } var svg = renderHeatmap(matrix, colLabels, rowLabels, title); currentSVG = svg; showResult(svg, matrix.length + ' 行 × ' + matrix[0].length + ' 列'); } catch (e) { showError('处理失败: ' + (e.message || e)); } } $('btn-main').addEventListener('click', function(e) { e.preventDefault(); doProcess(); }); $('btn-clear').addEventListener('click', function() { var inputs = document.querySelectorAll('input,textarea,select'); for (var i = 0; i < inputs.length; i++) { if (inputs[i].tagName === 'SELECT') inputs[i].selectedIndex = 0; else inputs[i].value = inputs[i].defaultValue; } var ra = $('result-area'); ra.hidden = true; ra.style.display = 'none'; var em = $('error-msg'); em.hidden = true; em.style.display = 'none'; $('btn-download').style.display = 'none'; }); $('btn-download').addEventListener('click', function() { if (!currentSVG) return; var blob = new Blob([currentSVG], { type: 'image/svg+xml' }); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = 'heatmap.svg'; a.click(); URL.revokeObjectURL(url); }); })();