281 lines
11 KiB
HTML
281 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Gráficos Dinâmicos com Inputs</title>
|
|
<style>
|
|
canvas {
|
|
border: 1px solid #000;
|
|
margin: 20px;
|
|
}
|
|
|
|
.chart-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.controls {
|
|
margin: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.control-group {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Gráficos Dinâmicos</h1>
|
|
<div class="controls">
|
|
<div class="control-group">
|
|
<label for="slice1">Fatias 1:</label>
|
|
<input type="number" id="slice1" min="0" max="100" value="20">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="slice2">Fatias 2:</label>
|
|
<input type="number" id="slice2" min="0" max="100" value="20">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="slice3">Fatias 3:</label>
|
|
<input type="number" id="slice3" min="0" max="100" value="20">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="slice4">Fatias 4:</label>
|
|
<input type="number" id="slice4" min="0" max="100" value="20">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="slice5">Fatias 5:</label>
|
|
<input type="number" id="slice5" min="0" max="100" value="20">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<canvas id="pieChart" width="300" height="300"></canvas>
|
|
<canvas id="barChart" width="300" height="300"></canvas>
|
|
<canvas id="lineChart" width="300" height="300"></canvas>
|
|
<canvas id="areaChart" width="300" height="300"></canvas>
|
|
<canvas id="radarChart" width="300" height="300"></canvas>
|
|
</div>
|
|
|
|
<script>
|
|
// Função para desenhar o gráfico de pizza
|
|
function drawPieChart() {
|
|
const canvas = document.getElementById('pieChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const slices = [
|
|
parseInt(document.getElementById('slice1').value),
|
|
parseInt(document.getElementById('slice2').value),
|
|
parseInt(document.getElementById('slice3').value),
|
|
parseInt(document.getElementById('slice4').value),
|
|
parseInt(document.getElementById('slice5').value)
|
|
];
|
|
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#FF9F40'];
|
|
const total = slices.reduce((sum, value) => sum + value, 0);
|
|
let startAngle = 0;
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.translate(canvas.width / 2, canvas.height / 2);
|
|
|
|
slices.forEach((value, index) => {
|
|
const sliceAngle = (value / total) * 2 * Math.PI;
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, canvas.width / 2, startAngle, startAngle + sliceAngle);
|
|
ctx.lineTo(0, 0);
|
|
ctx.closePath();
|
|
ctx.fillStyle = colors[index];
|
|
ctx.fill();
|
|
startAngle += sliceAngle;
|
|
});
|
|
|
|
ctx.resetTransform();
|
|
}
|
|
|
|
// Função para desenhar o gráfico de barras
|
|
function drawBarChart() {
|
|
const canvas = document.getElementById('barChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const barData = [
|
|
parseInt(document.getElementById('slice1').value),
|
|
parseInt(document.getElementById('slice2').value),
|
|
parseInt(document.getElementById('slice3').value),
|
|
parseInt(document.getElementById('slice4').value),
|
|
parseInt(document.getElementById('slice5').value)
|
|
];
|
|
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#FF9F40'];
|
|
const barWidth = 50;
|
|
const barSpacing = 70;
|
|
const maxBarHeight = canvas.height;
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
barData.forEach((value, index) => {
|
|
const x = index * barSpacing + 50;
|
|
const y = canvas.height - value;
|
|
const height = value;
|
|
ctx.fillStyle = colors[index];
|
|
ctx.fillRect(x, y, barWidth, height);
|
|
});
|
|
}
|
|
|
|
// Função para desenhar o gráfico de linhas
|
|
function drawLineChart() {
|
|
const canvas = document.getElementById('lineChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [
|
|
parseInt(document.getElementById('slice1').value),
|
|
parseInt(document.getElementById('slice2').value),
|
|
parseInt(document.getElementById('slice3').value),
|
|
parseInt(document.getElementById('slice4').value),
|
|
parseInt(document.getElementById('slice5').value)
|
|
];
|
|
const canvasWidth = canvas.width;
|
|
const canvasHeight = canvas.height;
|
|
const padding = 50;
|
|
const plotWidth = canvasWidth - 2 * padding;
|
|
const plotHeight = canvasHeight - 2 * padding;
|
|
const maxDataValue = Math.max(...data);
|
|
const minDataValue = Math.min(...data);
|
|
|
|
function valueToY(value) {
|
|
return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
|
|
}
|
|
|
|
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
ctx.strokeStyle = '#007bff';
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
data.forEach((value, index) => {
|
|
const x = padding + (index / (data.length - 1)) * plotWidth;
|
|
const y = valueToY(value);
|
|
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
|
});
|
|
ctx.stroke();
|
|
ctx.fillStyle = '#007bff';
|
|
data.forEach((value, index) => {
|
|
const x = padding + (index / (data.length - 1)) * plotWidth;
|
|
const y = valueToY(value);
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 5, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
});
|
|
}
|
|
|
|
// Função para desenhar o gráfico de área
|
|
function drawAreaChart() {
|
|
const canvas = document.getElementById('areaChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [
|
|
parseInt(document.getElementById('slice1').value),
|
|
parseInt(document.getElementById('slice2').value),
|
|
parseInt(document.getElementById('slice3').value),
|
|
parseInt(document.getElementById('slice4').value),
|
|
parseInt(document.getElementById('slice5').value)
|
|
];
|
|
const canvasWidth = canvas.width;
|
|
const canvasHeight = canvas.height;
|
|
const padding = 50;
|
|
const plotWidth = canvasWidth - 2 * padding;
|
|
const plotHeight = canvasHeight - 2 * padding;
|
|
const maxDataValue = Math.max(...data);
|
|
const minDataValue = Math.min(...data);
|
|
|
|
function valueToY(value) {
|
|
return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
|
|
}
|
|
|
|
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
ctx.fillStyle = '#007bff';
|
|
ctx.beginPath();
|
|
data.forEach((value, index) => {
|
|
const x = padding + (index / (data.length - 1)) * plotWidth;
|
|
const y = valueToY(value);
|
|
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
|
});
|
|
ctx.lineTo(canvasWidth - padding, canvasHeight - padding);
|
|
ctx.lineTo(padding, canvasHeight - padding);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
}
|
|
|
|
// Função para desenhar o gráfico de radar
|
|
function drawRadarChart() {
|
|
const canvas = document.getElementById('radarChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [
|
|
parseInt(document.getElementById('slice1').value),
|
|
parseInt(document.getElementById('slice2').value),
|
|
parseInt(document.getElementById('slice3').value),
|
|
parseInt(document.getElementById('slice4').value),
|
|
parseInt(document.getElementById('slice5').value)
|
|
];
|
|
const labels = ['A', 'B', 'C', 'D', 'E'];
|
|
const maxDataValue = Math.max(...data);
|
|
const centerX = canvas.width / 2;
|
|
const centerY = canvas.height / 2;
|
|
const radius = Math.min(centerX, centerY) - 10;
|
|
const angleStep = 2 * Math.PI / data.length;
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.translate(centerX, centerY);
|
|
|
|
// Draw the radar grid
|
|
for (let i = 0; i < data.length; i++) {
|
|
const angle = i * angleStep;
|
|
const x = radius * Math.cos(angle);
|
|
const y = radius * Math.sin(angle);
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, 0);
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Draw the radar area
|
|
ctx.beginPath();
|
|
data.forEach((value, index) => {
|
|
const angle = index * angleStep;
|
|
const x = (radius * (value / maxDataValue)) * Math.cos(angle);
|
|
const y = (radius * (value / maxDataValue)) * Math.sin(angle);
|
|
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
|
});
|
|
ctx.closePath();
|
|
ctx.fillStyle = 'rgba(0, 123, 255, 0.5)';
|
|
ctx.fill();
|
|
ctx.strokeStyle = '#007bff';
|
|
ctx.stroke();
|
|
|
|
// Draw labels
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
labels.forEach((label, index) => {
|
|
const angle = index * angleStep;
|
|
const x = (radius + 15) * Math.cos(angle);
|
|
const y = (radius + 15) * Math.sin(angle);
|
|
ctx.fillText(label, x, y);
|
|
});
|
|
|
|
ctx.resetTransform();
|
|
}
|
|
|
|
// Função para atualizar todos os gráficos
|
|
function updateCharts() {
|
|
drawPieChart();
|
|
drawBarChart();
|
|
drawLineChart();
|
|
drawAreaChart();
|
|
drawRadarChart();
|
|
}
|
|
|
|
// Atualiza todos os gráficos quando qualquer input muda
|
|
document.querySelectorAll('.controls input').forEach(input => {
|
|
input.addEventListener('input', updateCharts);
|
|
});
|
|
|
|
// Desenhe os gráficos inicialmente
|
|
updateCharts();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |