Fracasar en Blogger intentando ganar dinero: lo que aprendí después de años escribiendo

Bienvenid@ a Programación para Todos, un espacio para aprender a programar desde cero con ejemplos sencillos en PHP, HTML, JavaScript, Python, C++, SQL, y más. Aquí encontrarás historia, conceptos clave y aplicaciones reales. Porque la programación no es solo para expertos: en todo proyecto de software se necesita un equipo que entienda, colabore y construya en conjunto
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