动态创建多系列谷歌路线图的具有不同的datetime系列(Dynamic creation of m

2019-09-28 09:49发布

我有数据集的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"); } }); 



文章来源: Dynamic creation of multi series Google line chart with differing datetime series