循环多维数组以生成谷歌图表的多维数组

Posted 2023-02-24

【中文标题】循环多维数组以生成谷歌图表的多维数组

【英文标题】：Loop Multidimensional array to generate Multidimensional Array for Google Charts

【发布时间】：2016-05-30 18:36:09

【问题描述】：

我目前正在尝试使用 Google 图表生成报告。

我正在从我的 node.js 服务器端代码中的 mysql DB 中提取信息，并使用 socket.io 将其以多维数组的形式传递给客户端，如下所示：

[ [ 'ANSWERED', '477', 728 ],[ 'BUSY', '477', 48 ],[ 'NO ANSWER', '477', 277 ],[ 'ANSWERED', '478', 88 ],[ 'BUSY', '478', 24 ],[ 'NO ANSWER', '478', 56 ] ]

所以我目前正在循环遍历该数组并尝试提取值，使其在 Google 图表中采用以下格式：

[ ['477', 728, 48, 277 ],[ '478',88, 24, 56]]

我无法将其转换为这种格式，并且正在努力寻找方法，因此我可以将此信息插入到我的 Google 表格多维数组中并生成报告。

我目前的代码是：

socket.on("SQL", function (valueArr) 
        google.charts.load('current', 
            packages : ['corechart']
        );
        google.charts.setOnLoadCallback(drawMaterial);
        function drawMaterial() 
            var data = [];
            var Header = ['Call Disposition', 'Answered'];
            data.push(Header);
            for (i in valueArr) 
                var index = 0;
                var foundIndex = false;
                var agent = valueArr[i][1];
                var callcount = valueArr[i][2];
                for (var i in data) 
                    var dataElem = data[i];
                    if (dataElem[0] === agent) 
                        index = i;
                        foundIndex = true;
                        data[index][i] = callcount;
                    
                
                if (foundIndex === false) 
                    var chanar = new Array(agent);
                    data.push(chanar);
                
            

            console.log(data);

            var options = 
                title : 'Call Disposition',
                hAxis : 
                    title : 'Agents',   
                    minValue : 0,
                ,
                vAxis : 
                    title : 'Disposition Number'
                ,
                isStacked : true
            ;
            var chartdata = new google.visualization.arrayToDataTable(data);
            var material = new google.visualization.ColumnChart(document.getElementById('chart'));
            material.draw(chartdata, options);
        
    );

输出如下多维数组：

[['Call Disposition', 'Answered'],['477',277 ]]

我的想法是我需要多维数据数组最终看起来像（注意标题可以在代码中更改，这只是因为当前正在使用的值数量来构建它）：

[['Call Disposition', 'Answered','Busy','Failed'],['477', 728, 48, 277 ],[ '478',88, 24, 56]]

【参考方案1】：

编辑：这使用一个函数和一个临时变量temp 来收集值。每第三个项目，就会将一个新数组推送到结果数组。

function x(data) 
    var r = [], temp;
    data.forEach(function (a, i) 
        if (!(i % 3)) 
            temp = [a[1]];
            r.push(temp);
        
        temp.push(a[2]);
    );
    return r;


var data = [['ANSWERED', '477', 728], ['BUSY', '477', 48], ['NO ANSWER', '477', 277], ['ANSWERED', '478', 88], ['BUSY', '478', 24], ['NO ANSWER', '478', 56]],
    result = [['Call Disposition', 'Answered', 'Busy', 'Failed']].concat(x(data));

document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

【讨论】：

数组格式是否必须像您在数据中布局的那样，我的布局是[['ANSWERED', '477', 728], ['BUSY', '477', 48], ['NO ANSWER', '477', 277], ['ANSWERED', '478', 88], ['BUSY', '478', 24], ['NO ANSWER', '478', 56]]，您将如何以这种格式进行操作？因为它们不是单独的 MD 阵列？我在最初的问题中发布了错误的数组

谢谢你这是一个很好的解决方案。