Estoy usando un gráfico de barras js por primera vez que quiero completar a partir de una matriz de datos. esta es mi matriz

 this.feedBackChart=[{name:"test1",id:"1",score:"5"} {name:"test1",id:"1",score:"7"} {name:"test2",id:2,score:"4"}]

Me gustaría completar dos conjuntos de datos dinámicamente, uno para la prueba 1 y otro para la prueba 2. Y luego agregar los puntajes para la prueba 1, que serán 12 y la prueba 2 será 4.

esto es lo que probé pero no se muestra nada en la página sin errores también

 async chart() { var barChartData = { datasets: [] }; this.feedbackChart = []; this.feedback.map(item => { let m = this.feedbackResult.find(x => x.id == item.Id); this.feedbackChart.push({ ["name"]: m.metricName, ["id"]:item.id, ["score"]: item.score // im not sure how to sum up the scores here }); }); for (var i = 0; i < this.feedbackChart.length; i++) { barChartData.datasets.push({ label: this.feedbackChart.map(x=> x.name), backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data:this.feedbackChart.map(x=> x.score), }); } this.data = { labels: moment.months(), datasets: barChartData }; this.config = { type: 'bar', data: this.data, options: {} }; this.mychart = new Chart(document.getElementById("myChart") as HTMLCanvasElement, this.config); }

si cargo manualmente los datos de la siguiente manera para fines de prueba, funciona. Pero no puedo hacerlo de esta manera porque la longitud de mi matriz siempre cambiará

 this.data = { labels: moment.months(), datasets: [{ label: 'test1', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [12], }, { label: 'test2', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [4], } ] };