如何加入多个DataTable for Google图表

时间:2017-03-17 18:41:59

标签: javascript google-visualization

我想绘制多个折线图,其中x轴是Date

function drawChart() {
    var chartData = [
        [["date", "chart1"],
            [new Date('2017-02-06'), 0.73], [new Date('2017-02-02'), 0.84], [new Date('2017-02-01'), 1.0], [new Date('2017-01-31'), 0.97],
            [new Date('2017-01-30'), 0.86], [new Date('2017-01-25'), 0.88]],
        [["date", "chart2"],
            [new Date('2017-02-16'), 0.52], [new Date('2017-02-22'), 0.43]],
        [["date", "chart3"],
            [new Date('2017-02-21'), 0.6], [new Date('2017-02-22'), 0.42], [new Date('2017-02-15'), 0.61], [new Date('2017-02-20'), 0.56]]
    ]
    var options = {
        title: 'joined chart'
    };
    var dt1 = google.visualization.arrayToDataTable(chartData[0]);
    var dt2 = google.visualization.arrayToDataTable(chartData[1]);
    var dt3 = google.visualization.arrayToDataTable(chartData[1]);
    var data = google.visualization.data.join(dt1, dt2, 'full', [[0, 0]], [1], [1]);
    new google.visualization.ComboChart(document.getElementById('chart-div')).draw(data, options);
}

当只有两个DataTable数据时,它按预期工作。

enter image description here

要绘制三条线,我这样写:

var data3 = google.visualization.data.join(data, dt3, 'full', [[0, 0]], [1], [1]);

但结果图表并没有很好地绘制。

如何加入谷歌图表DataTable两个以上?

这是jsfiddle中的代码。 http://jsfiddle.net/fe26/gtf960nm/1/

1 个答案:

答案 0 :(得分:2)

组合两个单独图表的方法是使用join方法:

var joinedData = google.visualization.data.join(dt1, data2, 'full', [[0, 0]], [1], [1]);
var joinedData2 = google.visualization.data.join(joinedData, dt3, 'full', [[0, 0]], [1,2], [1]);

这里使用google.visualization.data.join方法组合前两个数据集。然后使用join方法将另一个第三个数据集合并到那个数据集。

小提琴: http://jsfiddle.net/q5ft1dex/