Question

我要显示四个折线图。但是在一个图表中总是显示3个图表。可能有一些加入问题。我的示例代码如下所示。

<div id="chart"></div>

function drawChart() {
    var d1 = new google.visualization.DataTable();
    d1.addColumn('date','Date');
    d1.addColumn('number','E1');
    d1.addRows([[new Date('2013-01-10'),312],[new Date('2013-02-14'),600],[new Date('2013-03-20'),520]]);

    var d2 = new google.visualization.DataTable();
    d2.addColumn('date','Date');
    d2.addColumn('number','E2');
    d2.addRows([[new Date('2013-01-19'),212],[new Date('2013-02-22'),300],[new Date('2013-03-07'),220]]);

    var d3 = new google.visualization.DataTable();
    d3.addColumn('date','Date');
    d3.addColumn('number','E3');
    d3.addRows([[new Date('2013-01-20'),312],[new Date('2013-02-25'),400],[new Date('2013-03-10'),320]]);

    var d4 = new google.visualization.DataTable();
    d4.addColumn('date','Date');
    d4.addColumn('number','E4');
    d4.addRows([[new Date('2013-01-18'),369],[new Date('2013-02-21'),485],[new Date('2013-03-09'),265]]);


    var jD1 = google.visualization.data.join(d1,d2,'full',[[0,0]],[1],[1]);

    var jD2 = google.visualization.data.join(jD1,d3,'full',[[0,0]],[1],[1]);

    var jD = google.visualization.data.join(jD2,d4,'full',[[0,0]],  [1,2],[1]);


    var chart = new google.visualization.LineChart(document.querySelector('#chart'));
    chart.draw(jD,{height:200,width:400,interpolateNulls:true});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

或者如何使用循环？像：

var joinedData = dataTableArr[0];
 $.each(dataTableArr, function (index, datatable) {

     if (index != 0) {
         joinedData = google.visualization.data.join(joinedData, datatable, 'full', [[0, 0]], [1], [1]);
     }
 });

提前致谢。

Answer 1

遇到同样的问题，我编写了以下一小段Javascript代码来合并任意数量的数据表：

// data_tables is the array of all the datatables to merge
var full_data_table = data_tables[0];
var cols_to_merge = [];
$.each(data_tables.slice(1), (idx, dt) => {
    cols_to_merge.push(idx+1);
    full_data_table = google.visualization.data.join(full_data_table, dt, 'full',
             [[0, 0]], cols_to_merge, [1]);
});

可能会有所改善。

注意：

jQuery用于.each
使用新的胖箭 ES符号以提高可读性

Google chart api - 加入多个数据表并在一个图表中显示多个折线图

1 个答案: