画一条线以显示 google 散点图中的平均分布

Question

我正在使用 google 核心图来组合散点图和折线图。我想在我的散点图中画一条如下图所示的线。

我的Json数据格式是这样的，

{realtimeinterval: "5410", startingtime: "09:21:42"}

我可以看到散点图，但看不到折线图的线平均分布。我不知道我哪里做错了。这是我的可视化代码

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
                $.ajax({
                    url: 'mydata',
                    type: 'GET',
                    success: function (result) {
                        var visdata = new google.visualization.DataTable();
                        visdata.addColumn('timeofday', 'Starting Time');
                        visdata.addColumn('number', 'Time Interval [minutes]');
                        var chart = new google.visualization.ComboChart(document.getElementById('chart_material'));
                        var options = {
                            width: 700,
                            height: 500,
                            chart: {
                                title: 'Time Interval'
                            },
                            hAxis: {title: 'Starting Time [hh:mm:ss]'},
                            vAxis: {title: 'Time Interval [minutes]'},
                            seriesType: 'scatter',
                                series: {
                                  1: {
                                    type: 'line'
                                  }
                                }
                        };
                        var jsonData = $.parseJSON(result);
                        var jsonmyData = jsonData['my_data'];
                        for (var i = 0; i < jsonmyData.length; i++) {
                            var timeInterval = jsonmyData[i].realtimeinterval;
                            var mins;
                            mins = Math.floor(((timeInterval / 60)), 0);
                            var clickTime = jsonmyData[i].startingtime.split(':');
                            visdata.addRow([
                                [parseInt(clickTime[0]), parseInt(clickTime[1]), parseInt(clickTime[2])],
                                parseInt(mins)
                            ]);
                        }
                        var view = new google.visualization.DataView(visdata);
                        view.setColumns([0, 1, {
                            label: 'Average = avg',
                            type: 'number',
                            calc: function (dt, row) {
                                return dt.getValue(row, 0)
                            }
                        }]);
                        chart.draw(visdata, options);                        },
                    error: function (xhr, status, error) {
                        console.log(error);
                    }
                });
            }

最终输出如下所示。在这里，我想画线作为平均实时间隔分布。

Answer 1

您可以使用group()方法来计算平均值...

// calculate average
var dataMean = google.visualization.data.group(
    visdata,
    [{column: 0, type: 'string', modifier: function () {return '';}}],
    [{column: 1, type: 'number', aggregation: google.visualization.data.avg}]
);
var sampleMean = dataMean.getValue(0, 1);

然后在数据视图中，使用上面计算的值...

var view = new google.visualization.DataView(visdata);
view.setColumns([0, 1, {
    label: 'Average = avg',
    type: 'number',
    calc: function (dt, row) {
        return sampleMean;
    }
}]);

您遇到的主要问题是，在您使用平均值构建视图后，
你必须使用视图来绘制图表...

chart.draw(view, options);

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
    var visdata = new google.visualization.DataTable();
    visdata.addColumn('timeofday', 'Starting Time');
    visdata.addColumn('number', 'Time Interval [minutes]');
    var chart = new google.visualization.ComboChart(document.getElementById('chart_material'));
    var options = {
        width: 700,
        height: 500,
        chart: {
            title: 'Time Interval'
        },
        hAxis: {title: 'Starting Time [hh:mm:ss]'},
        vAxis: {title: 'Time Interval [minutes]'},
        seriesType: 'scatter',
            series: {
              1: {
                type: 'line'
              }
            }
    };
    var jsonData = {my_data: [{realtimeinterval: "5410", startingtime: "09:21:42"}, {realtimeinterval: "5510", startingtime: "10:21:42"}, {realtimeinterval: "5610", startingtime: "11:21:42"}]};
    var jsonmyData = jsonData['my_data'];
    for (var i = 0; i < jsonmyData.length; i++) {
        var timeInterval = jsonmyData[i].realtimeinterval;
        var mins;
        mins = Math.floor(((timeInterval / 60)), 0);
        var clickTime = jsonmyData[i].startingtime.split(':');
        visdata.addRow([
            [parseInt(clickTime[0]), parseInt(clickTime[1]), parseInt(clickTime[2])],
            parseInt(mins)
        ]);
    }

    // calculate average
    var dataMean = google.visualization.data.group(
        visdata,
        [{column: 0, type: 'string', modifier: function () {return '';}}],
        [{column: 1, type: 'number', aggregation: google.visualization.data.avg}]
    );
    var sampleMean = dataMean.getValue(0, 1);

    var view = new google.visualization.DataView(visdata);
    view.setColumns([0, 1, {
        label: 'Average = avg',
        type: 'number',
        calc: function (dt, row) {
            return sampleMean;
        }
    }]);
    chart.draw(view, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_material"></div>

编辑

为最小值和最大值添加行，
您可以向 group() 方法添加额外的计算...

// calculate average, max, & min
var dataMean = google.visualization.data.group(
    visdata,
    [{column: 0, type: 'string', modifier: function () {return '';}}],
    [
        {column: 1, type: 'number', aggregation: google.visualization.data.avg},
        {column: 1, type: 'number', aggregation: google.visualization.data.max},
        {column: 1, type: 'number', aggregation: google.visualization.data.min}
    ]
);
var sampleMean = dataMean.getValue(0, 1);
var sampleMax = dataMean.getValue(0, 2);
var sampleMin = dataMean.getValue(0, 3);

然后我们需要向数据视图添加额外的列...

var view = new google.visualization.DataView(visdata);
view.setColumns([0, 1, {
    label: 'Average = avg',
    type: 'number',
    calc: function (dt, row) {
        return sampleMean;
    }
}, {
    label: 'Maximum = max',
    type: 'number',
    calc: function (dt, row) {
        return sampleMax;
    }
}, {
    label: 'Minimum = min',
    type: 'number',
    calc: function (dt, row) {
        return sampleMin;
    }
}]);

并且不要忘记更新 series 选项...

    series: {
      1: {  // average
        type: 'line'
      },
      2: {  // max
        type: 'line'
      },
      3: {  // min
        type: 'line'
      }
    }

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
    var visdata = new google.visualization.DataTable();
    visdata.addColumn('timeofday', 'Starting Time');
    visdata.addColumn('number', 'Time Interval [minutes]');
    var chart = new google.visualization.ComboChart(document.getElementById('chart_material'));
    var options = {
        width: 700,
        height: 500,
        chart: {
            title: 'Time Interval'
        },
        hAxis: {title: 'Starting Time [hh:mm:ss]'},
        vAxis: {title: 'Time Interval [minutes]'},
        seriesType: 'scatter',
        series: {
          1: {  // average
            type: 'line'
          },
          2: {  // max
            type: 'line'
          },
          3: {  // min
            type: 'line'
          }
        }
    };
    var jsonData = {my_data: [{realtimeinterval: "5410", startingtime: "09:21:42"}, {realtimeinterval: "5510", startingtime: "10:21:42"}, {realtimeinterval: "5610", startingtime: "11:21:42"}]};
    var jsonmyData = jsonData['my_data'];
    for (var i = 0; i < jsonmyData.length; i++) {
        var timeInterval = jsonmyData[i].realtimeinterval;
        var mins;
        mins = Math.floor(((timeInterval / 60)), 0);
        var clickTime = jsonmyData[i].startingtime.split(':');
        visdata.addRow([
            [parseInt(clickTime[0]), parseInt(clickTime[1]), parseInt(clickTime[2])],
            parseInt(mins)
        ]);
    }

    // calculate average, max, & min
    var dataMean = google.visualization.data.group(
        visdata,
        [{column: 0, type: 'string', modifier: function () {return '';}}],
        [
            {column: 1, type: 'number', aggregation: google.visualization.data.avg},
            {column: 1, type: 'number', aggregation: google.visualization.data.max},
            {column: 1, type: 'number', aggregation: google.visualization.data.min}
        ]
    );
    var sampleMean = dataMean.getValue(0, 1);
    var sampleMax = dataMean.getValue(0, 2);
    var sampleMin = dataMean.getValue(0, 3);

    var view = new google.visualization.DataView(visdata);
    view.setColumns([0, 1, {
        label: 'Average = avg',
        type: 'number',
        calc: function (dt, row) {
            return sampleMean;
        }
    }, {
        label: 'Maximum = max',
        type: 'number',
        calc: function (dt, row) {
            return sampleMax;
        }
    }, {
        label: 'Minimum = min',
        type: 'number',
        calc: function (dt, row) {
            return sampleMin;
        }
    }]);
    chart.draw(view, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_material"></div>

画一条线以显示 google 散点图中的平均分布

Draw a line to show the average distribution in google scatter plot

jquery

linechart

google-visualization

scatter-plot