重新组合数据chartjs

Question

我需要您的帮助来解决我的数据重组问题，我正在尝试使用 chartjs 和来自 xml 链接的动态数据创建一个图表，下面显示的代码有效，但不是我想要的确切方式。 在我目前的情况下，我得到“例如”ChefProjet=10，ChefProjet=7，ChefProjet=7，ChefProjet=7，所以 ChefProjet 重复了四次，但我想让 ChefProjet 只显示一次，它等于 31（10+ 7+7+7)，你可以在图片的链接中看到图表。 ↓

https://scontent.ftun11-1.fna.fbcdn.net/v/t1.15752-9/67271937_905246276477408_4457126943061442560_n.png?_nc_cat=101&_nc_oc=AQnTcvx_xBHwZTvX8evyZbi7zACL6uBR10or9Onqp5MJ-6yQLM9oa9eE0Bg2mkBsLhc&_nc_ht=scontent.ftun11-1.fna&oh=866978b6e1752f6dcf9be0086eba0122&oe=5DB50932

$.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + add2,



    method: "GET",
    headers: { "Accept": "application/json; odata=nometadata" },
    success: function (data) {

        if (data.value.length > 0) {

            var pieValues = [];
            var pieLabels = [];

            for (var i = 0; i < data.value.length; i++) {
                pieValues.push(parseInt(data.value[i].AssignmentWork));
                pieLabels.push(data.value[i].ResourceName);

            }
            var pieData = {
                datasets: [{
                    borderColor: "#80b6f4",
            pointBorderColor: "#80b6f4",
            pointBackgroundColor: "#80b6f4",
            pointHoverBackgroundColor: "#80b6f4",
            pointHoverBorderColor: "#80b6f4",
            pointBorderWidth: 1,
            pointHoverRadius: 1,
            pointHoverBorderWidth: 1,
            pointRadius: 2,
            fill: false,
            borderWidth: 1,
                    data: pieValues

                }],

                labels: pieLabels
            };
            var ctx = document.getElementById("myChart");

                                    if (window.myPieChart2 != undefined)
{
    window.myPieChart2.destroy();
}
//
            window.myPieChart2 = new Chart(ctx, {

                    type: 'line',
                    data: pieData,
                    options: {
    responsive: true,
    legend: { display: false },
      title: {
        display: true,
        text: 'Pourcentage d\'achevement des phases'
      },
    scales: {
      xAxes: [{
                gridLines: {
                    zeroLineColor: "transparent"
                },
                ticks: {
                    maxRotation: 90,
                    minRotation: 90,
                    fontSize:10
                }
            }],
      yAxes: [{
                ticks: {
                    fontColor: "rgba(0,0,0,0.5)",
                    fontStyle: "bold",
                    beginAtZero: true,
                    maxTicksLimit: 5,
                    padding: 20
                },
                gridLines: {
                    drawTicks: false,
                    display: false
                }

            }]
    }
  }


                });
            }
        },
        error: function (data) {

        }
    });

感谢您的宝贵时间。

Answer 1

成功了，解决方法如下：

    $.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + add2,



    method: "GET",
    headers: { "Accept": "application/json; odata=nometadata" },
    success: function (data) {

        if (data.value.length > 0) {

           var reducedObject = {};
            for (var i = 0; i < data.value.length; i++) {
                    if (!reducedObject[data.value[i].ResourceName]) {
                        reducedObject[data.value[i].ResourceName] = 0;
                }
                reducedObject[data.value[i].ResourceName] += parseInt(data.value[i].AssignmentWork);
            }

            var keys = Object.keys(reducedObject);
            var pieLabels = [];
            var pieValues = [];
            for (var i = 0; i < keys.length; i++) {
                    pieValues.push(reducedObject[keys[i]]);
                pieLabels.push(keys[i]);
            }


            var pieData = {
                datasets: [{
                    borderColor: "#80b6f4",
            pointBorderColor: "#80b6f4",
            pointBackgroundColor: "#80b6f4",
            pointHoverBackgroundColor: "#80b6f4",
            pointHoverBorderColor: "#80b6f4",
            pointBorderWidth: 1,
            pointHoverRadius: 1,
            pointHoverBorderWidth: 1,
            pointRadius: 2,
            fill: false,
            borderWidth: 1,
                    data: pieValues

                }],

                labels: pieLabels
            };
            var ctx = document.getElementById("myChart");

                                    if (window.myPieChart2 != undefined)
{
    window.myPieChart2.destroy();
}
//
            window.myPieChart2 = new Chart(ctx, {

                    type: 'line',
                    data: pieData,
                    options: {
    responsive: true,
    legend: { display: false },
      title: {
        display: true,
        text: 'Pourcentage d\'achevement des phases'
      },
    scales: {
      xAxes: [{
                gridLines: {
                    zeroLineColor: "transparent"
                },
                ticks: {
                    maxRotation: 90,
                    minRotation: 90,
                    fontSize:10
                }
            }],
      yAxes: [{
                ticks: {
                    fontColor: "rgba(0,0,0,0.5)",
                    fontStyle: "bold",
                    beginAtZero: true,
                    maxTicksLimit: 5,
                    padding: 20
                },
                gridLines: {
                    drawTicks: false,
                    display: false
                }

            }]
    }
  }


                });
            }
        },
        error: function (data) {

        }
    });