合并2谷歌图表数据表到1 [英] merge 2 google chart dataTables to 1

问题描述

我有2个Google图表数据表，我想合并到1个Google图表数据表.

i have 2 google chart dataTables that i want to merge to 1 google chart dataTable.

示例表1:

1 | test1 | 20

1 | test1 | 20

2 | test2 | 30

2 | test2 | 30

示例表2:

1 | test1 | 20

1 | test1 | 20

3 | test3 | 60

3 | test3 | 60

我想将2合并到:

1 | test1 | 20

1 | test1 | 20

2 | test2 | 30

2 | test2 | 30

3 | test3 | 60

3 | test3 | 60

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

what is the best way to do that? my code now does not combine them but just adds the rows and colums. docs: 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);

推荐答案

给出了问题中提供的示例表

given the example tables provided in the question,

您希望使用'full'联接，所有列均使用keys

you would want to use a 'full' join, with keys for all columns

将dt1Columns和dt2Columns的选项留空

请参阅以下工作摘要...

see following working snippet...

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>

编辑

假设数据表的列数始终相同
(彼此)

assuming the data tables always have the same number of columns
(as each other)

和连接类型将始终相同

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

you can build the keys dynamically using a loop

请参阅以下工作摘要...

see following working snippet...

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>

这篇关于合并2谷歌图表数据表到1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！