javascript - 将 2 个 google 图表数据表合并到 1 个

Question

我有 2 个 google 图表数据表，我想将它们合并到 1 个 google 图表数据表。

示例表 1:

1 |测试1 | 20

2 |测试2 | 30

<小时/>

示例表 2:

1 |测试1 | 20

3 |测试3 | 60

<小时/>

我想将 2 合并到:

1 |测试1 | 20

2 |测试2 | 30

3 |测试3 | 60

最好的方法是什么？ 我的代码现在不合并它们，而只是添加行和列。 文档:https://developers.google.com/chart/interactive/docs/reference#join

oldjson = '
{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]}
      ]
}';

newjson = '
{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]}
      ]
}';


var oldData = new google.visualization.DataTable(oldjson);
var newdata = new google.visualization.DataTable(newjson);
console.log("old data", oldData);
console.log("new data", newdata);

// i want to merge the 2 datas here
var mergedData = google.visualization.data.join(oldData, newdata, 'full', [[0, 0]], [1], [1]);

console.log("merged data", mergedData);

Answer 1

鉴于问题中提供的示例表格，

您希望使用'full'连接，所有列都使用keys

将dt1Columns和dt2Columns的选项留空

请参阅以下工作片段...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y1', 'y2'],
    [1, 'test1', 20],
    [2, 'test2', 30],
  ]);

  var data1 = google.visualization.arrayToDataTable([
    ['x', 'y1', 'y2'],
    [1, 'test1', 20],
    [3, 'test3', 60],
  ]);

  var joinData = new google.visualization.data.join(
    data,
    data1,
    'full',
    [[0,0], [1,1], [2,2]],
    [],
    []
  );

  var chart = new google.visualization.Table(document.getElementById('chart_div'));
  chart.draw(joinData);
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

假设数据表始终具有相同的列数
(彼此一样)

并且连接类型将始终相同

您可以使用循环动态构建键

请参阅以下工作片段...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y1', 'y2'],
    [1, 'test1', 20],
    [2, 'test2', 30],
  ]);

  var data1 = google.visualization.arrayToDataTable([
    ['x', 'y1', 'y2'],
    [1, 'test1', 20],
    [3, 'test3', 60],
  ]);

  var keys = [];
  for (var i = 0; i < data.getNumberOfColumns(); i++) {
    keys.push([i, i]);
  }

  var joinData = new google.visualization.data.join(
    data,
    data1,
    'full',
    keys,
    [],
    []
  );

  var chart = new google.visualization.Table(document.getElementById('chart_div'));
  chart.draw(joinData);
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>