449 lines
17 KiB
HTML
449 lines
17 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>12 Tipos de Gráficos</title>
|
|
<style>
|
|
canvas {
|
|
border: 1px solid #000;
|
|
margin: 20px;
|
|
}
|
|
|
|
.chart-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>12 Tipos de Gráficos</h1>
|
|
<div class="chart-container">
|
|
<canvas id="lineChart" width="400" height="300"></canvas>
|
|
<canvas id="barChart" width="400" height="300"></canvas>
|
|
<canvas id="pieChart" width="300" height="300"></canvas>
|
|
<canvas id="areaChart" width="400" height="300"></canvas>
|
|
<canvas id="heatmap" width="400" height="300"></canvas>
|
|
<canvas id="radarChart" width="400" height="300"></canvas>
|
|
<canvas id="doughnutChart" width="300" height="300"></canvas>
|
|
<canvas id="scatterChart" width="400" height="300"></canvas>
|
|
<canvas id="bubbleChart" width="400" height="300"></canvas>
|
|
<canvas id="polarChart" width="400" height="300"></canvas>
|
|
<canvas id="stackedBarChart" width="400" height="300"></canvas>
|
|
<canvas id="lineChartWithAnnotation" width="400" height="300"></canvas>
|
|
</div>
|
|
|
|
<script>
|
|
// Dados gerais
|
|
const data = [10, 20, 15, 25, 30, 20, 40];
|
|
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
|
|
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#FF9F40', '#C9CBCF', '#FF6F61'];
|
|
|
|
// Gráfico de Linhas
|
|
function drawLineChart() {
|
|
const canvas = document.getElementById('lineChart');
|
|
const ctx = canvas.getContext('2d');
|
|
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();
|
|
});
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'top';
|
|
labels.forEach((label, index) => {
|
|
const x = padding + (index / (data.length - 1)) * plotWidth;
|
|
ctx.fillText(label, x, canvasHeight - padding + 5);
|
|
});
|
|
}
|
|
drawLineChart();
|
|
|
|
// Gráfico de Barras
|
|
function drawBarChart() {
|
|
const canvas = document.getElementById('barChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [12, 19, 3, 5, 2, 3];
|
|
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
|
|
const barWidth = 50;
|
|
const barSpacing = 70;
|
|
const maxBarHeight = 300;
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
data.forEach((value, index) => {
|
|
const x = index * barSpacing + 50;
|
|
const y = canvas.height - value * maxBarHeight / Math.max(...data);
|
|
const height = value * maxBarHeight / Math.max(...data);
|
|
ctx.fillStyle = 'rgba(75, 192, 192, 0.7)';
|
|
ctx.fillRect(x, y, barWidth, height);
|
|
|
|
ctx.fillStyle = '#000';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'bottom';
|
|
ctx.fillText(labels[index], x + barWidth / 2, canvas.height - 5);
|
|
});
|
|
}
|
|
drawBarChart();
|
|
|
|
// Gráfico de Pizza
|
|
function drawPieChart() {
|
|
const canvas = document.getElementById('pieChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [10, 20, 30, 40];
|
|
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'];
|
|
|
|
function drawSlice(startAngle, sliceAngle, color) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(canvas.width / 2, canvas.height / 2);
|
|
ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, startAngle, startAngle + sliceAngle);
|
|
ctx.closePath();
|
|
ctx.fillStyle = color;
|
|
ctx.fill();
|
|
}
|
|
|
|
let startAngle = 0;
|
|
const total = data.reduce((acc, val) => acc + val, 0);
|
|
data.forEach((value, index) => {
|
|
const sliceAngle = (value / total) * 2 * Math.PI;
|
|
drawSlice(startAngle, sliceAngle, colors[index]);
|
|
startAngle += sliceAngle;
|
|
});
|
|
}
|
|
drawPieChart();
|
|
|
|
// Gráfico de Área
|
|
function drawAreaChart() {
|
|
const canvas = document.getElementById('areaChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [10, 20, 15, 25, 30, 20, 40];
|
|
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
|
|
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.lineTo(canvasWidth - padding, canvasHeight - padding);
|
|
ctx.lineTo(padding, canvasHeight - padding);
|
|
ctx.closePath();
|
|
ctx.fillStyle = 'rgba(75, 192, 192, 0.2)';
|
|
ctx.fill();
|
|
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();
|
|
});
|
|
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'top';
|
|
labels.forEach((label, index) => {
|
|
const x = padding + (index / (data.length - 1)) * plotWidth;
|
|
ctx.fillText(label, x, canvasHeight - padding + 5);
|
|
});
|
|
}
|
|
drawAreaChart();
|
|
|
|
// Gráfico de Calor
|
|
function drawHeatmap() {
|
|
const canvas = document.getElementById('heatmap');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [
|
|
[1, 2, 3, 4, 5],
|
|
[2, 3, 4, 5, 6],
|
|
[3, 4, 5, 6, 7],
|
|
[4, 5, 6, 7, 8],
|
|
[5, 6, 7, 8, 9]
|
|
];
|
|
const cellSize = 50;
|
|
const colors = ['#f7fbff', '#deebf7', '#c6dbef', '#9ecae1', '#6baed6', '#3182bd'];
|
|
|
|
function getColor(value) {
|
|
const index = Math.min(Math.floor(value / 2), colors.length - 1);
|
|
return colors[index];
|
|
}
|
|
|
|
data.forEach((row, y) => {
|
|
row.forEach((value, x) => {
|
|
ctx.fillStyle = getColor(value);
|
|
ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
|
|
});
|
|
});
|
|
}
|
|
drawHeatmap();
|
|
|
|
// Gráfico Radar
|
|
function drawRadarChart() {
|
|
const canvas = document.getElementById('radarChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [5, 6, 7, 8, 9];
|
|
const labels = ['A', 'B', 'C', 'D', 'E'];
|
|
const numOfPoints = data.length;
|
|
const radius = Math.min(canvas.width, canvas.height) / 2 - 20;
|
|
const angle = (2 * Math.PI) / numOfPoints;
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.translate(canvas.width / 2, canvas.height / 2);
|
|
|
|
// Draw grid
|
|
ctx.strokeStyle = '#ccc';
|
|
for (let i = 1; i <= 5; i++) {
|
|
ctx.beginPath();
|
|
for (let j = 0; j < numOfPoints; j++) {
|
|
ctx.lineTo(radius * (i / 5) * Math.cos(j * angle), radius * (i / 5) * Math.sin(j * angle));
|
|
}
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Draw data
|
|
ctx.beginPath();
|
|
data.forEach((value, index) => {
|
|
const x = radius * (value / 10) * Math.cos(index * angle);
|
|
const y = radius * (value / 10) * Math.sin(index * angle);
|
|
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
|
});
|
|
ctx.closePath();
|
|
ctx.strokeStyle = '#007bff';
|
|
ctx.stroke();
|
|
|
|
// Draw points
|
|
ctx.fillStyle = '#007bff';
|
|
data.forEach((value, index) => {
|
|
const x = radius * (value / 10) * Math.cos(index * angle);
|
|
const y = radius * (value / 10) * Math.sin(index * angle);
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 5, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
});
|
|
}
|
|
drawRadarChart();
|
|
|
|
// Gráfico Donut
|
|
function drawDoughnutChart() {
|
|
const canvas = document.getElementById('doughnutChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [10, 20, 30, 40];
|
|
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'];
|
|
const innerRadius = 60;
|
|
const outerRadius = canvas.width / 2;
|
|
|
|
function drawSlice(startAngle, sliceAngle, color) {
|
|
ctx.beginPath();
|
|
ctx.arc(canvas.width / 2, canvas.height / 2, outerRadius, startAngle, startAngle + sliceAngle);
|
|
ctx.arc(canvas.width / 2, canvas.height / 2, innerRadius, startAngle + sliceAngle, startAngle, true);
|
|
ctx.closePath();
|
|
ctx.fillStyle = color;
|
|
ctx.fill();
|
|
}
|
|
|
|
let startAngle = 0;
|
|
const total = data.reduce((acc, val) => acc + val, 0);
|
|
data.forEach((value, index) => {
|
|
const sliceAngle = (value / total) * 2 * Math.PI;
|
|
drawSlice(startAngle, sliceAngle, colors[index]);
|
|
startAngle += sliceAngle;
|
|
});
|
|
}
|
|
drawDoughnutChart();
|
|
|
|
// Gráfico de Dispersão
|
|
function drawScatterChart() {
|
|
const canvas = document.getElementById('scatterChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [[10, 20], [15, 25], [20, 30], [25, 35], [30, 40]];
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = '#007bff';
|
|
data.forEach(([x, y]) => {
|
|
ctx.beginPath();
|
|
ctx.arc(x * 10, y * 10, 5, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
});
|
|
}
|
|
drawScatterChart();
|
|
|
|
// Gráfico de Bolhas
|
|
function drawBubbleChart() {
|
|
const canvas = document.getElementById('bubbleChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [
|
|
{ x: 10, y: 20, radius: 10 },
|
|
{ x: 20, y: 30, radius: 15 },
|
|
{ x: 30, y: 40, radius: 20 }
|
|
];
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = '#FF6F61';
|
|
data.forEach(({ x, y, radius }) => {
|
|
ctx.beginPath();
|
|
ctx.arc(x * 10, y * 10, radius, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
});
|
|
}
|
|
drawBubbleChart();
|
|
|
|
// Gráfico Polar
|
|
function drawPolarChart() {
|
|
const canvas = document.getElementById('polarChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [5, 10, 15, 20, 25];
|
|
const labels = ['A', 'B', 'C', 'D', 'E'];
|
|
const numOfPoints = data.length;
|
|
const radius = Math.min(canvas.width, canvas.height) / 2 - 20;
|
|
const angle = (2 * Math.PI) / numOfPoints;
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.translate(canvas.width / 2, canvas.height / 2);
|
|
|
|
// Draw data
|
|
ctx.beginPath();
|
|
data.forEach((value, index) => {
|
|
const x = radius * (value / 30) * Math.cos(index * angle);
|
|
const y = radius * (value / 30) * Math.sin(index * angle);
|
|
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
|
});
|
|
ctx.closePath();
|
|
ctx.strokeStyle = '#007bff';
|
|
ctx.stroke();
|
|
|
|
// Draw points
|
|
ctx.fillStyle = '#007bff';
|
|
data.forEach((value, index) => {
|
|
const x = radius * (value / 30) * Math.cos(index * angle);
|
|
const y = radius * (value / 30) * Math.sin(index * angle);
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 5, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
});
|
|
}
|
|
drawPolarChart();
|
|
|
|
// Gráfico de Barras Empilhadas
|
|
function drawStackedBarChart() {
|
|
const canvas = document.getElementById('stackedBarChart');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [
|
|
[10, 20, 30],
|
|
[20, 30, 40],
|
|
[30, 40, 50]
|
|
];
|
|
const colors = ['#FF6384', '#36A2EB', '#FFCE56'];
|
|
const barWidth = 50;
|
|
const barSpacing = 70;
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
data.forEach((stack, stackIndex) => {
|
|
stack.forEach((value, index) => {
|
|
const x = stackIndex * barSpacing + 50;
|
|
const y = canvas.height - (value / 100) * canvas.height;
|
|
const height = (value / 100) * canvas.height;
|
|
ctx.fillStyle = colors[index];
|
|
ctx.fillRect(x, y, barWidth, height);
|
|
});
|
|
});
|
|
}
|
|
drawStackedBarChart();
|
|
|
|
// Gráfico de Linhas com Anotação
|
|
function drawLineChartWithAnnotation() {
|
|
const canvas = document.getElementById('lineChartWithAnnotation');
|
|
const ctx = canvas.getContext('2d');
|
|
const data = [10, 20, 15, 25, 30, 20, 40];
|
|
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
|
|
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();
|
|
});
|
|
|
|
// Anotação
|
|
const annotationX = padding + (data.length - 1) / (data.length - 1) * plotWidth;
|
|
const annotationY = valueToY(data[data.length - 1]);
|
|
ctx.beginPath();
|
|
ctx.moveTo(annotationX, annotationY);
|
|
ctx.lineTo(annotationX + 60, annotationY - 20);
|
|
ctx.strokeStyle = 'red';
|
|
ctx.stroke();
|
|
ctx.fillStyle = 'red';
|
|
ctx.fillText('Ponto Final', annotationX + 70, annotationY - 25);
|
|
}
|
|
drawLineChartWithAnnotation();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |