Pie Chart - clawam tools

Перейти к основному содержимому

clawam tools

Инструменты Документы Daoark EN Главная Главная / Преобразование данных › Главная 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 >= 2) { var label = parts.slice(0, parts.length - 1).join(' '); pts.push({ label: label, value: parseFloat(parts[parts.length - 1]) }); } else if (parts.length === 1) { pts.push({ label: '#' + (i+1), value: parseFloat(parts[0]) }); } } return pts; } function escape(s) { return String(s).replace(/[&<>"']/g, function(c) { return {'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]; }); } function arcPath(cx, cy, r, startAngle, endAngle) { var x1 = cx + r * Math.cos(startAngle); var y1 = cy + r * Math.sin(startAngle); var x2 = cx + r * Math.cos(endAngle); var y2 = cy + r * Math.sin(endAngle); var large = (endAngle - startAngle) > Math.PI ? 1 : 0; return 'M ' + cx + ' ' + cy + ' L ' + x1 + ' ' + y1 + ' A ' + r + ' ' + r + ' 0 ' + large + ' 1 ' + x2 + ' ' + y2 + ' Z'; } function renderPieChart(pts, title, showPercent) { if (pts.length === 0) return ''; var total = pts.reduce(function(s, p) { return s + p.value; }, 0); if (total <= 0) return ''; var W = 720, H = 420; var cx = 220, cy = H / 2 + 10, r = 150; var colors = ['#3b82f6','#10b981','#f59e0b','#ef4444','#8b5cf6','#ec4899','#06b6d4','#84cc16','#f97316','#6366f1']; var svg = ''; return svg; } var currentSVG = ''; function doProcess() { try { var textA = getVal('text-a'); if (!textA) { showError('请输入数据'); return; } var title = getVal('title'); var showPercent = getVal('show-percent'); var pts = parseData(textA); if (pts.length === 0) { showError('无有效数据'); return; } var svg = renderPieChart(pts, title, showPercent); currentSVG = svg; var total = pts.reduce(function(s, p) { return s + p.value; }, 0); showResult(svg, '类别数: ' + pts.length + ', 总量: ' + total + ', 显示百分比: ' + showPercent); } 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 = 'pie-chart.svg'; a.click(); URL.revokeObjectURL(url); }); })();