Question

我在JSON Feed中有不确定数量的数据集。这意味着我永远不确定会有多少人回来，可能是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方法，但是由于数据集数量未知，因此我不太确定如何创建联接。

我已经能够使用固定数量的数据集来做到这一点，但是我对如何联接数据一无所知，因为它似乎是规定性的，因此我不确定使用Google图表是否可能。

根据我的研究，我需要能够操纵以下各项以加入不同的数据系列：

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 feed的数据表添加一个新列。

使用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");
        }
    });

动态创建具有不同日期时间系列的多系列Google折线图

1 个答案: