合并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屋!