La guía completa de automatización con macros en Office (Excel, Word, APIs y más)
Bienvenid@ a Programación para Todos, un espacio personal donde documento aprendizajes técnicos, ideas y procesos de programación que he querido probar y entender por cuenta propia. Los casos y ejemplos que comparto no tienen referencia a mi trabajo, sino que son ejercicios, pruebas y escenarios recreados a partir de inquietudes técnicas personales. Este blog funciona como un compendio personal de conocimiento: código, ideas y reflexiones que decido compartir.
Cuando trabajamos con datos o funciones matemáticas, es muy útil poder visualizarlos en una gráfica. Con JavaScript y HTML, esto es sencillo si utilizamos una biblioteca como Chart.js.
A continuación, te presento un ejemplo donde graficamos la función cuadrática y = x^3. Usaremos etiquetas en el eje X desde -10 hasta 10 y graficar los valores correspondientes para y.
Aquí tienes el código que necesitas para generar la gráfica:
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graficar Funciones con JavaScript</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Graficar Funciones con JavaScript y HTML</h1>
<canvas id="miGrafica" width="400" height="200"></canvas>
<script>
// Generar datos para la función y = x^3
const etiquetas = [];
const datosFuncion = [];
for (let x = -10; x <= 10; x++) {
etiquetas.push(x);
datosFuncion.push(x * x); // y = x^2
}
const ctx = document.getElementById('miGrafica').getContext('2d');
const miGrafica = new Chart(ctx, {
type: 'line', // Tipo de gráfica
data: {
labels: etiquetas,
datasets: [{
label: 'y = x^3',
data: datosFuncion,
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
fill: false
}]
},
options: {
scales: {
x: { title: { display: true, text: 'Valor de x' } },
y: { title: { display: true, text: 'Valor de y' } }
}
}
});
</script>
</body>
</html>
Este código utiliza un elemento <canvas> donde se dibuja la gráfica. Luego, mediante un script de JavaScript, generamos los datos para la función y = x^3 y los pasamos a Chart.js para que los graficaque.
Visita la url https://www.programacionparatodos.com/p/graficar-funciones-con-javascript-y.html Para ver el resultado
Este ejemplo es una introducción básica, pero Chart.js tiene una gran variedad de opciones para crear gráficos más complejos, incluyendo gráficos de barras, líneas, radar, y más. Puedes personalizar tu gráfica para que se ajuste a tus necesidades.
Comentarios
Publicar un comentario
Dejanos tus dudas y comentarios