Zum Hauptinhalt springen
claw
am
tools
Werkzeuge
Dokumente
Daoark
EN
Startseite
Startseite
/
Datenkonvertierung
›
Startseite
manifest.json
0; }); var pts = []; for (var i = 0; i < lines.length; i++) { var parts = lines[i].split(/[\s,;\t]+/).filter(function(x) { return x.length > 0; }); if (parts.length === 1) pts.push({ x: i + 1, y: parseFloat(parts[0]) }); else if (parts.length >= 2) pts.push({ x: parseFloat(parts[0]), y: parseFloat(parts[1]) }); } return pts; } function renderLineChart(pts, title, xlabel, ylabel) { if (pts.length === 0) return ''; var W = 720, H = 420; var M = { top: 50, right: 40, bottom: 60, left: 70 }; var innerW = W - M.left - M.right; var innerH = H - M.top - M.bottom; var xs = pts.map(function(p) { return p.x; }); var ys = pts.map(function(p) { return p.y; }); var xMin = Math.min.apply(null, xs), xMax = Math.max.apply(null, xs); var yMin = Math.min.apply(null, ys), yMax = Math.max.apply(null, ys); if (yMin === yMax) { yMin -= 1; yMax += 1; } if (xMin === xMax) { xMin -= 1; xMax += 1; } function sx(x) { return M.left + (x - xMin) / (xMax - xMin) * innerW; } function sy(y) { return M.top + innerH - (y - yMin) / (yMax - yMin) * innerH; } var pathD = pts.map(function(p, i) { return (i === 0 ? 'M' : 'L') + sx(p.x) + ',' + sy(p.y); }).join(' '); var svg = '
'; if (title) svg += '
' + escape(title) + '
'; // Y 轴 svg += '
'; svg += '
'; // Y 刻度(5 个) for (var i = 0; i <= 5; i++) { var v = yMin + (yMax - yMin) * (5 - i) / 5; var y = M.top + innerH * i / 5; svg += '
'; svg += '
' + v.toFixed(1) + '
'; } // X 刻度(自动) var xStep = Math.max(1, Math.floor(pts.length / 8)); for (var i = 0; i < pts.length; i += xStep) { var x = sx(pts[i].x); svg += '
' + pts[i].x + '
'; } // 折线 svg += '
'; // 圆点 for (var j = 0; j < pts.length; j++) { svg += '
'; } // 轴标签 if (xlabel) svg += '
' + escape(xlabel) + '
'; if (ylabel) { svg += '
' + escape(ylabel) + '
'; } svg += '
'; return svg; } function escape(s) { return String(s).replace(/[&<>"']/g, function(c) { return {'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]; }); } var currentSVG = ''; function doProcess() { try { var textA = getVal('text-a'); if (!textA) { showError('请输入数据'); return; } var title = getVal('title'); var xlabel = getVal('xlabel'); var ylabel = getVal('ylabel'); var pts = parseData(textA); if (pts.length === 0) { showError('无有效数据'); return; } var svg = renderLineChart(pts, title, xlabel, ylabel); currentSVG = svg; showResult(svg, '数据点: ' + pts.length + ', X: ' + (pts[0].x + '~' + pts[pts.length-1].x) + ', Y: ' + Math.min.apply(null, pts.map(function(p){return p.y;})) + '~' + Math.max.apply(null, pts.map(function(p){return p.y;}))); } 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 = 'line-chart.svg'; a.click(); URL.revokeObjectURL(url); }); })();