Google 可视化从多个DataView追加行到一个DataTable

Question

我想从三个数据视图中填充 data_results，这是一个 DataTable，很可能是串行方式。我不知道执行此操作的语法。

我试过使用 .addRow() 和 .addRows()，但在尝试最后附加到 data_results 时似乎无法获得正确的语法。

请参阅下面我的简单示例。

一些给定的：
我想生成一个名为 data_results.
的数据 table 它将有 3 列（Final1、Final2、Final3）。
我想知道如何从 view_A、view_B 和 view_C 中获取行并将它们附加到 data_results。

一如既往，感谢您的专家协助！

此代码段已根据@WhiteHat 的建议进行编辑以生成最终解决方案。

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

renderChart_onPageLoad();

function renderChart_onPageLoad() {
  google.charts.setOnLoadCallback(function() {
    drawTable();
  }); //END setOnLoadCallback
} //END function renderChart_onEvent

function drawTable() {

  var data_A = new google.visualization.DataTable();
  data_A.addColumn('string', 'A1');
  data_A.addColumn('string', 'A2');
  data_A.addColumn('number', 'A3');
  data_A.addRow(['X', 'Y', 1]);

  var data_B = new google.visualization.DataTable();
  data_B.addColumn('string', 'B1');
  data_B.addColumn('string', 'B2');
  data_B.addColumn('number', 'B3');
  data_B.addRow(['XX', 'YY', 2]);

  var data_C = new google.visualization.DataTable();
  data_C.addColumn('string', 'C1');
  data_C.addColumn('string', 'C2');
  data_C.addColumn('number', 'C3');
  data_C.addRow(['XXX', 'YYY', 3])

  var view_A = new google.visualization.DataView(data_A);
  var view_B = new google.visualization.DataView(data_B);
  var view_C = new google.visualization.DataView(data_C);

  var data_results_join1 = google.visualization.data.join(view_A, view_B, 'full', 
  [[0, 0],[1, 1],[2, 2]], '', '');

  var data_results = google.visualization.data.join(data_results_join1, view_C, 'full', 
  [[0, 0],[1, 1],[2, 2]], '', '');

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

  var categoryPicker1 = new google.visualization.ControlWrapper({
    'controlType': 'StringFilter',
    'containerId': 'div_categoryPicker1',
    'matchType': 'any',
    'options': {
      'filterColumnIndex': 0, //Column used in control
      'ui': {
        //'label': 'Is exclude selection possible?',
        //'labelSeparator': ':',
        'labelStacking': 'vertical',
        'selectedValuesLayout': 'belowWrapping',
        'allowTyping': false,
        'allowMultiple': false,
        'allowNone': true
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      allowHtml: true
    }
  });

  dashboard.bind([categoryPicker1], [table]);
  dashboard.draw(data_results);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id='div_dashboard'>
  <div id='div_categoryPicker1'></div><br/>
  <div id='div_table'></div>
</div>

在研究这个任务时，我也发现这个有用。

var data_results = new google.visualization.DataTable();
data_results.addColumn('string', 'FinalC1');
data_results.addColumn('string', 'FinalC2');
data_results.addColumn('number', 'FinalC3');

function addRowsToDataResult(sourceView, c1, c2, c3) {
   for (var i = 0; i < sourceView.getNumberOfRows(); i++) {
      var col1 = sourceView.getValue(i, sourceView.getColumnIndex(c1));
      var col2 = sourceView.getValue(i, sourceView.getColumnIndex(c2));
      var col3 = sourceView.getValue(i, sourceView.getColumnIndex(c3));
      data_results.addRow([col1, col2, col3]);
   }
}
addRowsToDataResult(view_A, 'A1', 'A2', 'A3');
addRowsToDataResult(view_B, 'B1', 'B2', 'B3');
addRowsToDataResult(view_C, 'C1', 'C2', 'C3');

感谢@WhiteHat！干杯...

Answer 1

评论：

need to use the join method -- two times -- first to join the first two tables, and again to join the third table to the result of the first join -- here is an example of how to use the join method – WhiteHat Oct 3 at 19:34

这就是答案。修改原 post 以反映建议。谢谢@WhiteHat

Google 可视化从多个DataView追加行到一个DataTable

Google Visualization append rows from multiple DataView to one DataTable

javascript

google-visualization