Nuevo en Chart.js, me preguntaba si hay un método integrado para sumar valores y dependiendo de la unidad de tiempo.
Preguntando aquí después de mucha búsqueda en los documentos.
Por ahora, la barra de marzo muestra 20 y la barra de junio muestra 10.
Quiero tener 25 para marzo y 15 para junio, para sumar y para el mismo mes.
const ctx = document.getElementById("tests-chart") const testsChart = new Chart(ctx, { type: "bar", data: { datasets: [ { label: 'Dataset 1', data: [ { x: "24/03/2022", y: 20 }, { x: "25/03/2022", y: 5 }, { x: "24/06/2022", y: 10 }, { x: "25/06/2022", y: 5 }, ], backgroundColor: 'rgb(255, 99, 132)', }, ], }, options: { scales: { x: { type: "time", time: { parser: "dd/MM/yyyy", unit: "month", // Luxon format string tooltipFormat: "MM", round: 'month' }, }, }, }, }) <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.1.0/dist/chartjs-adapter-luxon.min.js"></script> <div> <canvas id="tests-chart"></canvas> </div>Puede manipular su conjunto de datos como se menciona a continuación y lograr el resultado esperado.
const ctx = document.getElementById("tests-chart"); const data =[ { x: "24/03/2022", y: 20 }, { x: "25/03/2022", y: 5 }, { x: "24/06/2022", y: 10 }, { x: "25/06/2022", y: 5 } ]; let updatedData =[]; let tempDateCollection =[]; data.map((yData , index)=> { const formatedDate = moment(yData.x, "DD/MM/YYYY").format('MMM/YYYY'); if(tempDateCollection.includes(formatedDate)){ const index = tempDateCollection.indexOf(formatedDate); const element = updatedData[index]; updatedData[index] = {...element, y: element.y + yData.y} } else{ tempDateCollection.push(formatedDate); updatedData.push(yData); } }) const testsChart = new Chart(ctx, { type: "bar", data: { datasets: [ { label: 'Dataset 1', data:updatedData, backgroundColor: 'rgb(255, 99, 132)', }, ], }, options: { scales: { x: { type: "time", time: { parser: "dd/MM/yyyy", unit: "month", // Luxon format string tooltipFormat: "MM", round: 'month' }, }, }, }, }) <script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.1.0/dist/chartjs-adapter-luxon.min.js"></script> <div> <canvas id="tests-chart"></canvas> </div>