Javascript 谷歌可视化-如何连接多个数据表？

我正在尝试使用谷歌可视化Api创建多行图表。我使用JSON将数据添加到图表中

开始时创建了多个数据表——表的数量等于JSON键的数量

编辑：我找到了原始问题的答案-没有循环。-答案是在一张图表中画两条线。在评论中，有一个答案是如何使用多行代码实现这一点——这个JSFiddle:但是我仍然不知道如何在我的案例中使用这个答案

问题是它只画了两条线（第一条和最后一条）？我想这是由这一行引起的：

joinedData = google.visualization.data.join(joinedData, datatable, 'full', [[0, 0]], [1], [1]);

这是一种连接所有数据表的尝试，因此所有行都应该在图表上可见。但事实上，我不知道为什么它不能正常工作

加入文档：

这是整个连接循环：

    var joinedData = datas[0];
    $.each(datas, function (index, data1) {
        if (index != 0) {
            joinedData = google.visualization.data.join(joinedData, data1, 'full', [[0, 0]], [1], [1]);
        }
    });

这就是整个剧本——或者更好

---

首先，需要使用最新的库（

loader.js

）
根据

通过

jsapi

loader仍然可用的谷歌图表版本不再持续更新。请从现在起使用新的gstatic loader

包括此…

不是这个…

这将从…

google.load（'visualization'，'1'，{packages:['corechart']，callback:drawChart}）

到…

google.charts.load（'current'，{packages:['corechart']，callback:drawChart}）

下一步，只有两行（列）进入最终数据表的原因，

与第5个参数（
dt1Columns
）有关

对于每个联接，第一个表中只包含第一个数据列
[1]

相反，参数应该随着每次连接而增长

[1]
，
[1,2]
，
[1,2,3]

请参阅以下工作片段


函数绘图图（）{
var google_chart_json={“Whirpool.cz:[[2016,11,2]，156.0]，[2016,11,3]，69.0]，[2016,11,4,126.0]，[2016,11,5,67.0]，[2016,11,6,97.0]，[2016,11,7,193.0]，[2016,11,8,96.0]，[2016,11,9]，64.0]，[2016,11,10]，[2016,11,11,10]，[2016,11,11,11,11,190.0]，[2016,11,11,2]，[Mall.cz]，[2016,95.0]，[2016,3][[2016,11,4]，158.0]，[2016,11,5]，160.0]，[2016,11,6]，191.0]，[2016,11,7]，106.0]，[2016,11,8]，51.0]，[2016,11,9]，[2016,11,10]，[2016,11,10]，89.0]，[2016,11,11]，154.0]，[Mall.sk:[2016,11,2]，72.0]，[2016,11,3]，108.0]，[2016,11,4]，175.0]，[2016,11,5]，81.0]，[2016,11,6]，[2016,11,11,10]，[1880][[2016,11,8]，52.0]，[2016,11,9]，196.0]，[2016,11,10]，199.0]，[2016,11,11,117.0]，“Teshop.cz:[[2016,11,2]，93.0]，[2016,11,3]，71.0]，[2016,11,4]，59.0]，[2016,11,5]，101.0]，[2016,11,6]，86.0]，[2016,11,7]，139.0]，[2016,11,8]，110.0]，[2016,11,9]，75.0]，[2016,11,10]，[2016,11]，“Gamepro.cz:[[2016,11,2,89.0]，[2016,11,3,104.0]，[2016,11,4,62.0]，[2016,11,5,190.0]，[2016,11,6,172.0]，[2016,11,7,109.0]，[2016,11,8,183.0]，[2016,11,9,88.0]，[2016,11,10]，89.0]，[2016,11,11,11,10]，[2016,106.0]，[2016,11,11,10]，[2016,10]，[Gamepro.0]，“Gamepro.sk]：[2016,133.0]：[2016,11,11,10]，[2016,10]，[2016,10]，[2016,10]：[[2016,11,5]，151.0]，[2016,11,6]，119.0]，[2016,11,7]，172.0]，[2016,11,8]，139.0]，[2016,11,9]，177.0]，[2016,11,10]，[2016,11,11,6]，174.0]，[2016,11,11,11,14.0]，[2016,11,3]，120.0]，[2016,11,4]，116.0]，[2016,11,11,5]，60.0]，[2016,11,6]，179.0]，[2016,11,11,162.0]，[2016,10]，[[2016,11,9]，123.0]，[2016,11,10]，138.0]，[2016,11,11]，109.0]，“Okosice.sk:[[2016,11,2]，83.0]，[2016,11,3]，111.0]，[2016,11,4]，185.0]，[2016,11,5]，199.0]，[2016,11,6]，133.0]，[2016,11,7]，142.0]，[2016,11,8]，61.0]，[2016,11,9]，[2016,11,10]，74.0]，[2016,11,10,10]，168.0]，[2016,12.0]，[2016,128.sk]，“最佳市场”": [[[2016, 11, 2], 174.0], [[2016, 11, 3], 154.0], [[2016, 11, 4], 180.0], [[2016, 11, 5], 87.0], [[2016, 11, 6], 193.0], [[2016, 11, 7], 105.0], [[2016, 11, 8], 106.0], [[2016, 11, 9], 115.0], [[2016, 11, 10], 185.0], [[2016, 11, 11], 159.0]]};
var数据=[]；
$.each（google\u chart\u json，函数（key，val）{
var域=密钥；
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，domain+'date'）；
data.addColumn（'数字'，域）；
$.each（val，函数（u，扫描）{
风险值年份=扫描[0][0]；
var月=扫描[0][1]；
var日=扫描[0][2]；
var价格=扫描[1]；
data.addRows([
[新日期（年、月、日）、价格]
]);
});
数据推送（数据）；
});
var joinedData=数据[0]；
var列=[]；
$.each（数据、函数（索引、数据表）{
如果（索引！=0）{
columns.push（索引）；
joinedData=google.visualization.data.join（joinedData，datatable，'full'，[[0,0]]，columns[1]）；
}
});
var chart=new google.visualization.LineChart（document.querySelector（'#chart_div'））；
图表绘制（联合数据、{
身高：300，
宽度：600，
是的，
探索者：{
maxZoomOut:2，
keepInBounds：对
},
});
}
load（'current'，{packages:['corechart']，callback:drawChart}）；
谢谢，我也做过类似的事情——joinedData=google.visualization.data.join（joinedData，datatable，'full'，[[0,0]]，range（1，index+1），[1]）；关于loader.js的信息非常有用。
function drawChart() {
        var google_chart_json = {"Whirpool.cz": [[[2016, 11, 2], 156.0], [[2016, 11, 3], 69.0], [[2016, 11, 4], 126.0], [[2016, 11, 5], 67.0], [[2016, 11, 6], 97.0], [[2016, 11, 7], 193.0], [[2016, 11, 8], 96.0], [[2016, 11, 9], 64.0], [[2016, 11, 10], 117.0], [[2016, 11, 11], 190.0]], "Mall.cz": [[[2016, 11, 2], 95.0], [[2016, 11, 3], 98.0], [[2016, 11, 4], 158.0], [[2016, 11, 5], 160.0], [[2016, 11, 6], 191.0], [[2016, 11, 7], 106.0], [[2016, 11, 8], 51.0], [[2016, 11, 9], 158.0], [[2016, 11, 10], 89.0], [[2016, 11, 11], 154.0]], "Mall.sk": [[[2016, 11, 2], 72.0], [[2016, 11, 3], 108.0], [[2016, 11, 4], 175.0], [[2016, 11, 5], 81.0], [[2016, 11, 6], 123.0], [[2016, 11, 7], 188.0], [[2016, 11, 8], 52.0], [[2016, 11, 9], 196.0], [[2016, 11, 10], 199.0], [[2016, 11, 11], 117.0]], "Teshop.cz": [[[2016, 11, 2], 93.0], [[2016, 11, 3], 71.0], [[2016, 11, 4], 59.0], [[2016, 11, 5], 101.0], [[2016, 11, 6], 86.0], [[2016, 11, 7], 139.0], [[2016, 11, 8], 110.0], [[2016, 11, 9], 75.0], [[2016, 11, 10], 183.0], [[2016, 11, 11], 156.0]], "Gamepro.cz": [[[2016, 11, 2], 89.0], [[2016, 11, 3], 104.0], [[2016, 11, 4], 62.0], [[2016, 11, 5], 190.0], [[2016, 11, 6], 172.0], [[2016, 11, 7], 109.0], [[2016, 11, 8], 183.0], [[2016, 11, 9], 88.0], [[2016, 11, 10], 89.0], [[2016, 11, 11], 106.0]], "Gamepro.sk": [[[2016, 11, 2], 133.0], [[2016, 11, 3], 173.0], [[2016, 11, 4], 102.0], [[2016, 11, 5], 151.0], [[2016, 11, 6], 119.0], [[2016, 11, 7], 172.0], [[2016, 11, 8], 139.0], [[2016, 11, 9], 177.0], [[2016, 11, 10], 174.0], [[2016, 11, 11], 141.0]], "Datart.cz": [[[2016, 11, 2], 77.0], [[2016, 11, 3], 120.0], [[2016, 11, 4], 116.0], [[2016, 11, 5], 60.0], [[2016, 11, 6], 179.0], [[2016, 11, 7], 162.0], [[2016, 11, 8], 151.0], [[2016, 11, 9], 123.0], [[2016, 11, 10], 138.0], [[2016, 11, 11], 109.0]], "Ockosice.sk": [[[2016, 11, 2], 83.0], [[2016, 11, 3], 111.0], [[2016, 11, 4], 185.0], [[2016, 11, 5], 199.0], [[2016, 11, 6], 133.0], [[2016, 11, 7], 142.0], [[2016, 11, 8], 61.0], [[2016, 11, 9], 74.0], [[2016, 11, 10], 168.0], [[2016, 11, 11], 128.0]], "Bestmarket.sk": [[[2016, 11, 2], 174.0], [[2016, 11, 3], 154.0], [[2016, 11, 4], 180.0], [[2016, 11, 5], 87.0], [[2016, 11, 6], 193.0], [[2016, 11, 7], 105.0], [[2016, 11, 8], 106.0], [[2016, 11, 9], 115.0], [[2016, 11, 10], 185.0], [[2016, 11, 11], 159.0]]};
        var datas = [];
        $.each(google_chart_json, function (key, val) {
            var domain = key;
            var data = new google.visualization.DataTable();
            data.addColumn('date', domain + 'Date');
            data.addColumn('number', domain);


            $.each(val, function (_, scan) {
                var year = scan[0][0];
                var month = scan[0][1];
                var day = scan[0][2];
                var price = scan[1];

                data.addRows([
                    [new Date(year, month, day), price]
                ]);
            });
            datas.push(data);
        });
        var joinedData = datas[0];
        $.each(datas, function (index, datatable) {
            console.log('joining index '+index)
            if (index != 0) {
                joinedData = google.visualization.data.join(joinedData, datatable, 'full', [[0, 0]], [1], [1]);
            }
        });


        var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
        chart.draw(joinedData, {
            height: 300,
            width: 600,
            interpolateNulls: true,
            explorer: {
                maxZoomOut: 2,
                keepInBounds: true
            },
        });
    }
    google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});