Para pasarle valores a una gráfica de Chart.js, primero debes obtener los datos que quieres graficar desde un elemento HTML. Por ejemplo, si quieres obtener los valores de un conjunto de elementos input con la clase "data":
Puedes usar el siguiente código en JavaScript para obtener un array con los valores y crear la gráfica:
// Obtener los elementos input con la clase "data"
const dataElements = document.querySelectorAll('.data');
// Crear un array para almacenar los valores
const dataValues = [];
// Iterar sobre los elementos y agregar los valores al array
dataElements.forEach(function(element) {
dataValues.push(parseInt(element.value));
});
// Configuración de la gráfica
const chartConfig = {
type: 'bar',
data: {
labels: ['Dato 1', 'Dato 2', 'Dato 3', 'Dato 4', 'Dato 5'],
datasets: [{
label: 'Datos',
data: dataValues,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
};
// Crear la gráfica
const chart = new Chart(document.querySelector("#chart"), chartConfig);
Este código crea un objeto de configuración para la gráfica que incluye un array con los valores obtenidos de los elementos input y crea la gráfica con new Chart(). En este ejemplo se usa un gráfico de barras (type: 'bar') y se configura para que muestre los valores de los ejes Y a partir de 0 usando ticks: {beginAtZero: true} en la opción scales.