javascript - Google可视化-从现有的DataTable制作新的DataTable？

我想知道如何从现有的DataTable制作新的DataTable吗？

用例：
我有一个proxyTable，它已隐藏并连接到CategoryFilter。这用于构造页面上所有链接到一个CategoryFilter的其他表。

目标：
在每个新表中包括一个总计行，该行反映了已过滤选择的总和。

初始解决方案：
我尝试从sourceData提取数组，创建一个名为dataResults的新数据表，将总计行添加到dataResults，并绘制最终表。它可以工作，但是似乎很费劲。

var sourceData = proxyTable.getDataTable();

    var rowCount = sourceData.getNumberOfRows();
    var colCount = sourceData.getNumberOfColumns();

    var tempRow = [];
    var tempArray = [];
    var pushValue;

    //push header row
    for (var k = 0; k < colCount; k++) {
      pushValue = sourceData.getColumnLabel(k);
      tempRow.push(pushValue);
    }
    tempArray.push(tempRow);
    tempRow = []; //reset

    //push data rows
    for (var i = 0; i < rowCount; i++) {
      for (var j = 0; j < colCount; j++) {
        pushValue = sourceData.getValue(i, j);
        tempRow.push(pushValue);
      }
      tempArray.push(tempRow);
      tempRow = []; //reset
    }

    //Create new Google DataTable from Array
    var dataResults = new google.visualization.arrayToDataTable(tempArray);

我的问题：
我如何制作一个包含sourceData中所有记录的数据表，而不经过上面尝试的步骤？

感谢您的指导！

工作示例：

更新：
在@WhiteHat的每个答案中添加了var dataResults = sourceData.clone();，并且出现错误sourceData.clone is not a function

我的语法有误吗？也许是我正在使用的ChartWrapper？

更新2：
在@WhiteHat中为每个答案＃2添加了var dataResults = sourceData.toDataTable().clone();，它可以正常工作。

google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
});

$(document).ready(function() {
  renderChart_onPageLoad();
});

function renderChart_onPageLoad() {
  google.charts.setOnLoadCallback(function() {
    drawDashboard();
  });
}

function drawDashboard() {

  var data = google.visualization.arrayToDataTable([
    ['Name', 'RoolNumber', 'Gender', 'Age', 'Donuts eaten'],
    ['Michael', 1, 'Male', 12, 5],
    ['Elisa', 2, 'Female', 20, 7],
    ['Robert', 3, 'Male', 7, 3],
    ['John', 4, 'Male', 54, 2],
    ['Jessica', 5, 'Female', 22, 6],
    ['Aaron', 6, 'Male', 3, 1],
    ['Margareth', 7, 'Female', 42, 8],
    ['Miranda', 8, 'Female', 33, 6]
  ]);

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

  var categoryPicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'categoryPicker',
    options: {
      filterColumnLabel: 'Gender',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false
      }
    }
  });

  var proxyTable = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'proxyTable',
    options: {
      width: '500px'
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table',
    options: {
      width: '500px'
    }
  });

  dashboard.bind([categoryPicker], [proxyTable]);
  dashboard.draw(data);

  google.visualization.events.addListener(dashboard, 'ready', function() {
    redrawChart();
  });

  function redrawChart() {

    var sourceData = proxyTable.getDataTable();

    //WhiteHat suggestion2 - WORKS
    var dataResults = sourceData.toDataTable().clone();

    //WhiteHat suggestion1 - Didn't work
    //var dataResults = sourceData.clone();

    //INITIAL SOLUTION - works
    //var rowCount = sourceData.getNumberOfRows();
    //var colCount = sourceData.getNumberOfColumns();

    //var tempRow = [];
    //var tempArray = [];
    //var pushValue;

    //for (var k = 0; k < colCount; k++) {
      //pushValue = sourceData.getColumnLabel(k);
      //tempRow.push(pushValue);
    //}
    //tempArray.push(tempRow);
    //tempRow = []; //reset

    //push data rows
    //for (var i = 0; i < rowCount; i++) {
      //for (var j = 0; j < colCount; j++) {
        //pushValue = sourceData.getValue(i, j);
        //tempRow.push(pushValue);
      //}
      //tempArray.push(tempRow);
      //tempRow = []; //reset
    //}

    //var dataResults = new google.visualization.arrayToDataTable(tempArray);

    var group = google.visualization.data.group(sourceData, [{
      // we need a key column to group on, but since we want all rows grouped into 1,
      // then it needs a constant value
      column: 0,
      type: 'number',
      modifier: function() {
        return 1;
      }
    }], [{
      column: 1,
      id: 'SumRool',
      label: 'SumRool',
      type: 'number',
      aggregation: google.visualization.data.sum
    }, {
      column: 3,
      id: 'SumAge',
      label: 'SumAge',
      type: 'number',
      aggregation: google.visualization.data.sum
    }, {
      // get the average age
      column: 4,
      id: 'SumEaten',
      label: 'SumEaten',
      type: 'number',
      aggregation: google.visualization.data.sum
    }]);

    dataResults.insertRows(0, [
      ['Grand Total', group.getValue(0, 1), null, group.getValue(0, 2), group.getValue(0, 3)],
    ]);

    //Set dataTable
    table.setDataTable(dataResults);
    table.draw();

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="dashboard">
  <div id="categoryPicker"></div><br /> Proxy Table<br />
  <div id="proxyTable"></div><br /> Table
  <br />
  <div id="table"></div><br /><br />
</div>

最佳答案

数据表方法-> clone()

var newDataTable = oldDataTable.clone();

从文档中...


  clone()-返回数据表的克隆。结果是数据表的深层副本，但单元格属性，行属性，表属性和列属性除外，它们是浅表副本。这意味着非原始属性是通过引用复制的，但是原始属性是通过值复制的。