Tengo una matriz con objetos y quiero crear un conjunto de datos para el gráfico de líneas en chartjs, pero el conjunto de datos que obtengo es incorrecto y, por lo tanto, obtengo dos gráficos de líneas en lugar de uno. ¿Qué estoy haciendo mal aquí?
const data = [{May 04: '', May 05: '1', May 06: ''}, {May 04: '2', May 05: '', May 06: ''}] const chartData = { labels: ['May 04', 'May 05', 'May 06' ] datasets: getDataSet(data), }; const getDataSet = (data) => { const dataSet = []; dataSet.push({ label: 'Total' }); data.forEach((v) => { dataSet.push({ data: Object.values(v), }); }) return dataSet; };Su problema podría ser resuelto con el siguiente código:
const data = [ { 'May 04': '', 'May 05': '1', 'May 06': ''}, { 'May 04': '2', 'May 05': '', 'May 06': ''} ]; const getDataSet = data => { const dsData = [0, 0, 0]; data.forEach(o => Object.values(o).forEach((v, i) => dsData[i]+= Number(v))); return { label: 'Total', data: dsData }; }; const chartData = { labels: ['May 04', 'May 05', 'May 06'], datasets: [getDataSet(data)] }; console.log(chartData);En caso de que sus datos sean dinámicos, se puede hacer de la siguiente manera:
const data = [ { 'May 04': '', 'May 05': '1', 'May 06': '', 'May 07': '1' }, { 'May 04': '2', 'May 05': '', 'May 06': '', 'May 07': '2' } ]; const getDataSet = data => { const dsData = Object.keys(data[0]).fill(0); data.forEach(o => Object.values(o).forEach((v, i) => dsData[i]+= Number(v))); return { label: 'Total', data: dsData }; }; const chartData = { labels: Object.keys(data[0]), datasets: [getDataSet(data)] }; console.log(chartData); const data = [ { 'May 04': '', 'May 05': '1', 'May 06': '', 'May 07': '1' }, { 'May 04': '2', 'May 05': '', 'May 06': '', 'May 07': '2' } ]; const getDataSet = data => { const dsData = Object.keys(data[0]).fill(0); data.forEach(o => Object.values(o).forEach((v, i) => dsData[i]+= Number(v))); return { label: 'Total', data: dsData }; }; const chartData = { labels: Object.keys(data[0]), datasets: [getDataSet(data)] }; new Chart('myChart', { type: 'line', data: chartData, options: { scales: { y: { ticks: { stepSize: 1 } } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script> <canvas id="myChart" height="80"></canvas>