您的位置: 首页  >  技术问答  >  动态创建具有不同日期时间系列的多系列Google折线图

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

分类: 技术问答 • 2022-06-12 18:07:47
问题描述：

我在JSON提要中有不确定数量的数据集.这意味着我永远不确定会有多少人回来，可能是1、12或30，这是一个未知数.该系列由日期和值组成.我希望能够使用多个数据集绘制折线图.数据集还具有不同的日期和时间，使事情变得更加复杂.到目前为止，我有以下代码，似乎在运行中多次创建了google.visualization.DataTable().

I have an undetermined number of data sets in a JSON feed. This means that I am never sure how many are coming back, it could be 1, 12 or 30, it's an unknown. The series are made up of a date and a value. I want to be able to draw a line chart with the multiple datasets. The datasets have different dates and times as well, to make things more complicated. I have the following code so far, that seems to create the google.visualization.DataTable() multiple times on the fly.

 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方法，但是由于我的数据集数量未知，所以我不太确定如何创建联接.

I have checked that the data has arrays and values in it through the console. I am aware that I need to use the google.visualization.data.join method, but as I have an unknown number of data sets, I am not too sure how to create the join.

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

I have been able to do this with fixed numbers of datasets, but I am flummoxed as to how to join the data, I am not sure if it is even possible with Google Charts as it seems to be prescriptive.

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

From my research I need to be able to manipulate the following to join the different data series:

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提要的一小部分示例:

Here is a small sample of the JSON feed:

[{"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.

In summary, I want to be able to draw a multi-line chart with an unknown number of datasets, which have differing datetimes.

TIA

答

尽管连接可以正常工作，但在这种情况下，并不需要它.

although a join would work, in this case, it isn't needed.

您只需为每个新的json feed将一个新列添加到数据表中即可.

you can simply add a new column to the data table for each new json feed.

使用setValue方法而不是addRow来应用值.

use the setValue method to apply the values, rather than addRow.

请参阅以下工作摘要...

see following working snippet... 

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

相关推荐