将行和列动态添加到 Google 柱形图中

Question

我的问题有点类似于How to dynamically add rows/columns to a Google Column Chart，但我的数据结构有点不同。

而不是这样的数据

['Year', 'Sales', 'Expenses' , 'Other'],
['2004',  1000,      400     ,  232   ],
['2005',  1170,      460    ,  421   ],

我的数据是这样的：

我已经完成了添加列部分。

var keys = Object.keys(columnsIn);
var last = keys[keys.length - 1];
             // in this case the first column is of type 'string'.
            dataTable.addColumn('string', last); //get last key as ESN will be in last column. 
            // all other columns are of type 'number'.
            for (var i = 0; i < numCols-1; i++){
                dataTable.addColumn('number', keys[i]); 
            }

我在添加行时遇到困难。

Answer 1

您可以使用 .reduce:

将对象数组转换为二维数组

const data = [{ESN:"ESN4",G03:1},{ESN:"ESN3",G03:2}];
const arr2d = data.reduce((arr,obj)=>(arr.push(Object.values(obj)),arr),[["ESN","G03"]]);
console.info(arr2d)

将行和列动态添加到 Google 柱形图中

Add Row and Column Dynamically to a Google Column Chart

javascript

dynamic

google-visualization