Quiero que las barras totales sean 12 cuando ingrese 12. ¿Cómo hacer que la longitud de las etiquetas variables sea igual a mi entrada?
este es mi código:
function updateChart() { let val = $("#num-input").val() let valNum = parseInt(val) console.log(valNum) let labels = []; // this length = bar total labels = $("#num-input").val() console.log(labels) const data = { labels: labels, datasets: [{ backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [10, 20, 5, 2, 20, 30, 45], // = value for each bar }] }; const config = { type: 'bar', data: data, options: {} }; const myChart = new Chart( document.getElementById('myChart'), config ); }este es mi resultado
Esto se debe a que chart.js espera una matriz, por lo que primero deberá crear una matriz que contenga 12 etiquetas en lugar de pasar el número 12 a la matriz de etiquetas:
function updateChart() { let val = $("#num-input").val() let valNum = parseInt(val) console.log(valNum) let labels = []; // this length = bar total for (let i = 0; i < $("#num-input").val(); i++) { labels.push(i) // or any other value you want your label to have } const data = { labels: labels, datasets: [{ backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [10, 20, 5, 2, 20, 30, 45], // = value for each bar }] }; const config = { type: 'bar', data: data, options: {} }; const myChart = new Chart( document.getElementById('myChart'), config ); }