|
function grafico(v1, v2, v3, v4) {
const valores = [v1, v2, v3, v4];
const maxVal = Math.max(...valores, 1); //
Evita diviso por zero
const largura = 400;
const altura = 400;
const margemBottom = 30;
const alturaUtil = altura
- margemBottom - 20;
const larguraBarra = 50;
const espaco = 30;
const inicioX = 45;
const barras = valores.map((v,
i) => {
const alturaBarra = (v / maxVal) * alturaUtil;
const x = inicioX + i * (larguraBarra + espaco);
const y = altura - margemBottom
- alturaBarra;
return `
<rect
x="${x}" y="${y}" width="${larguraBarra}"
height="${alturaBarra}"
fill="#4F46E5" rx="4"
/>
<text
x="${x + larguraBarra
/ 2}" y="${y - 8}" text-anchor="middle" font-size="12"
fill="#333" font-family="sans-serif">${v}</text>
<text
x="${x + larguraBarra
/ 2}" y="${altura - 10}" text-anchor="middle" font-size="12"
fill="#666" font-family="sans-serif">V${i + 1}</text>
`;
}).join('');
return `
<svg
width="${largura}"
height="${altura}" viewBox="0
0 ${largura} ${altura}" xmlns="http://www.w3.org/2000/svg"
style="background: #f9fafb; border-radius:
8px;">
<!-- Linha base -->
<line
x1="20" y1="${altura - margemBottom}" x2="${largura - 20}"
y2="${altura - margemBottom}" stroke="#ccc" stroke-width="1"
/>
${barras}
</svg>
`.trim();
}
|
