精巧的Javascript-堆积的条形图

Question

因此，我正在使用plotly.js创建一个堆积的条形图，除了我的foreach语句无法正常工作之外，其他所有内容都可以正确显示。

由于某种原因，它只是显示第二个值“ SegmentTwo”

代码：

function getQuarterData(fiscalYear, itemTypeID, divID) {
//Draws Stacked Bar chart
return $.ajax({
    type: "GET",
    url: window.applicationBaseUrl + 'api/QuarterReport/GetChartingData',
    datatype: JSON,
    data: {
        fiscalYear: fiscalYear,
        itemTypeID: itemTypeID
    },
    error: function (textStatus, errorThrown) {
        console.log("There was an issue loading the data. - " + 
errorThrown);
        console.log(textStatus);
        alert("Looks like there was an issue loading the data!");
    },
    success: function (result) {
        var fiscalYear = result.Data.FiscalYear % 2000;
        var stringFormat = result.Data.StringFormat;
        //Here it loops throughout the segment list..
        result.Data.SegmentList.forEach(function (segment) {  // ---> The 
        //issue is here..it's displaying only the one segment and not the 
        //two other remaining ones          
            var xAxis = [];
            var yAxis = [];
            segment.PreviousFY.forEach(function (quarter) {          
                xAxis.push("FY" + (fiscalYear - 1) + "-Q" + 
quarter.Quarter);
                yAxis.push(quarter.Value);
            });

            segment.CurrentFY.forEach(function (quarter) {
                xAxis.push("FY" + fiscalYear + "-Q" + quarter.Quarter);
                yAxis.push(quarter.Value);
        });


            // Create array of formatted values for text (not taken care 
 by tickformatting)
            var labels = [];
            yAxis.forEach(function (yValue) {
                labels.push(d3FormatConvert(stringFormat, yValue));
            });

            var trace1 = {
                x: xAxis,
                y: yAxis,
                type: 'bar',
                name: segment.SegmentName,
                text: labels,
                textposition: 'auto',
                hoverinfo: 'none',
                marker: {
                    color: segment.PrimaryColor
                }
            };


            var trace2 = {
               x: xAxis,
                y: yAxis,
                type: 'bar',
                name: segment.SegmentName,
                text: labels,
                textposition: 'auto',
                hoverinfo: 'none',
                marker: {
                    color: segment.PrimaryColor
                }
            };

            var trace3 = {
                x: xAxis,
                y: yAxis,
                type: 'bar',
                name: segment.SegmentName,
                text: labels,
                textposition: 'auto',
                hoverinfo: 'none',
                marker: {
                    color: segment.PrimaryColor}
            };

            // traces
            data = [trace1, trace2, trace3];

            var layout = {
                title: segment.SegmentName,
                //showlegend: false,
                height: 200,
                margin: {
                    l: 50,
                    r: 10,
                    b: 30,
                    t: 40,
                    pad: 10
                },
                xaxis: {
                    tickfont: {
                        size: 11,
                        color: 'black'
                    }
                },
                yaxis: {
                    tickformat: d3Format(stringFormat)
                },
                barmode: 'stack',
                annotations: [{
                    x: " ",
                    y: segment.BlueGoal,
                    xref: 'x',
                    yref: 'y',
                    text: d3FormatConvert(stringFormat, 
segment.BlueGoal),
                    showarrow: true,
                    arrowcolor: "red",
                    font: {
                        size: 11
                    },
                    arrowhead: 2,
                    ax: 30,
                    ay: 0
                }]
            };

            // Plot chart
            Plotly.newPlot(divID, data, layout, { displayModeBar: false 
});
        });

    }
});

}

输出：

所需的输出：

我在做什么错？我想我已经盯着这个眼睛太久了，我无法弄清楚。任何帮助都非常感谢！