动态创建多系列谷歌路线图的具有不同的datetime系列

Question

我有数据集的JSON提要人数不详。这意味着，我从来不知道有多少都回来了，也可能是1，12或30，这是一个未知数。该系列是由一个日期和值。我希望能够绘制折线图与多个数据集。该数据集有不同的日期和时间，以及，使事情变得更加复杂。我有以下的代码，到目前为止，似乎在飞行中创建google.visualization.DataTable()多次。

 success: function (d) {               
                var parsedData = $.parseJSON(d);
                $.each(parsedData, function (key, value) {                   
                    var dName = new google.visualization.DataTable(); 
                    dName.addColumn('date', 'Date');
                    dName.addColumn('number', 'Data');
                    var result = $.parseJSON(value);  
                    $.each(result, function (k, v) {                            
                        dName.addRow([new Date(v.ReadingDate), Number(v.ReadingValue)]);
                    });

                    console.log(dName);
                });   
            },....

我已经检查了数据通过控制台中有数组和值。我知道我需要使用google.visualization.data.join的方法，但因为我有一个未知的数据集的数量，我也不太清楚如何创建加入。

我已经能够与数据集的固定电话号码要做到这一点，但我狼狈为如何加入数据，我不知道，如果它甚至有可能与谷歌图表，因为它似乎是指令性的。

从我的研究，我需要能够操纵加入不同的数据系列如下：

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

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(joinedData, {
        height: 300,
        width: 600,
        interpolateNulls: true
    });

这里是JSON饲料的小样品：

[{"LoggerId":"1000651443","ReadingDate":"2018-12-05 00:03:03, "ReadingValue":"12.6", "Tooltip":"Someinfo"},
{"LoggerId":"1000651447","ReadingDate":"2018-12-05 00:04:03, "ReadingValue":"12.7", "Tooltip":"Someinfo"}],
[{"LoggerId":"1000651444","ReadingDate":"2018-12-05 00:03:05, "ReadingValue":"12.9", "Tooltip":"Someinfo"},
 {"LoggerId":"1000651445","ReadingDate":"2018-12-05 00:03:07, "ReadingValue":"14.9", "Tooltip":"Someinfo"}],
[{"LoggerId":"1000651446","ReadingDate":"2018-12-05 00:03:17, "ReadingValue":"13.6", "Tooltip":"Someinfo"},
 {"LoggerId":"1000651446","ReadingDate":"2018-12-05 00:04:17, "ReadingValue":"43.6", "Tooltip":"Someinfo"}]

总之，我希望能够绘制多折线图与未知数量的数据集，其中有不同的datetimes的。

TIA

Answer 1

尽管加盟会的工作，在这种情况下，这是没有必要的。

你可以简单地将新列添加到数据表中的每个新的JSON提要。

使用setValue方法应用价值，而不是addRow。

看到下面的工作片段...

 var section = $('#LocationNameDdl :selected').val();
    var uid = '@guid';
    var from = $('#dateFrom').val();
    var to = $('#dateTo').val(); 

    $.ajax({
        url: 'ProjectCharts/GetChartDataBySection',
        datatype: 'json',
        type: 'get',
        async: false,
        data: { section: section, uid: uid, from: from, to: to },
        contentType: 'application/json; charset=utf-8',
        success: function (d) {
            google.charts.load('current', {
                packages: ['corechart']
            }).then(function () {
                parsedData = $.parseJSON(d);
                var dName = new google.visualization.DataTable();
                dName.addColumn('date', 'Date');
                $.each(parsedData, function (key, value) {
                    var colIndex = dName.addColumn('number', 'Data' + key);
                    var result = $.parseJSON(value);                    
                    $.each(result, function (k, v) {
                        var rowIndex = dName.addRow();
                        dName.setValue(rowIndex, 0, new Date(v.ReadingDate));
                        dName.setValue(rowIndex, colIndex, Number(v.ReadingValue));
                    });
                });

                var options = multiLineChartOptions();
                var chart = new google.visualization.LineChart(document.getElementById('chart'));
                chart.draw(dName, options);
            });

        },
        error: function () {
            alert("Error");
        }
    });