在谷歌图表中汇总分组/过滤的数据

Question

我对网络工具和 JavaScript 非常陌生。所以请原谅一些菜鸟问题。

我正在使用使用外部数据的 Google 可视化仪表板。我有一个 CategoryFilter 控件并显示一个表、柱形图和一个汇总表。

在post 和this post 的帮助以及用户@jmac 和@asgallant 回答的许多问题的帮助下，我能够走到这一步并制作了这个工作示例 - JSFiddle。

代码：

google.visualization.events.addListener(proxyTable, 'ready', function () {
var group = google.visualization.data.group(proxyTable.getDataTable(), [{
// we need a key column to group on, but since we want all rows grouped     into 1, 
// then it needs a constant value
column: 0,
type: 'number',
modifier: function () {
return 1;
}
}], [{
// get the Avg GDP
column: 19,
type: 'number',
aggregation: google.visualization.data.avg
}, 
{
// get the Max Population
column: 9,
type: 'number',
aggregation: google.visualization.data.max
}, 
{
// get the # of -ve growth years
column: 21,
type: 'number',
aggregation: google.visualization.data.count
}]);

document.getElementById('AvgGDP').innerHTML = group.getValue(0, 1);
document.getElementById('Population').innerHTML = group.getValue(0, 2);
document.getElementById('GDPGrowth').innerHTML = group.getValue(0, 3);
});

// var formatter = new google.visualization.NumberFormat({pattern: '#,###'});
// formatter.format(Population, 0); // Apply formatter to second column

问题：

第一季度。如您所见，汇总表不规则。人口领域的数字很大，很难阅读。同样，平均 GDP 的小数点太多。我无法格式化这些字段。如果我使用这段代码，图表根本不显示！

    var formatter = new google.visualization.NumberFormat({pattern: '#,###'});
    formatter.format(Population, 0); // Apply formatter to second column

如何使用格式化功能？我在这里做错了什么？

第二季度。我想显示负增长的计数。如何获得条件以计算第 21 列中的负值？

第三季度。如何使用数学函数计算（第 19 列的平均值）*（第 21 列的总和）？

第四季度。我无法在 Google 图表中填充摘要。因此使用了引导表。有人可以指导我如何用汇总值填充表格吗？不过，这不是必需的。

非常感谢。

Answer 1

格式化程序适用于 DataTables，因此在这种情况下，您希望在 DataTable group 上调用 formatter.format，而不是 Population：

formatter.format(group, 0);

然后在检索数据时，如果你想要格式化的值，调用getFormattedValue方法而不是getValue方法：

document.getElementById('AvgGDP').innerHTML = group.getFormattedValue(0, 1);

获取负值计数需要自定义聚合函数，如下所示：

{
    // get the # of -ve growth years
    column: 21,
    type: 'number',
    aggregation: function (values) {
        var count = 0;
        for (var i = 0; i < values.length; i++) {
            if (values[i] < 0) {
                count++;
            }
        }
        return count;
    }
}

最后两部分一起回答，你应该可以基于DataTablegroup创建一个Table，并使用ChartWrapper对象的view参数来计算你的产品：

var summaryTable = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'summaryDiv',
    dataTable: group,
    options: {
        // summary table options
    }
    view: {
        columns: [1, 2, 3, {
            type: 'number',
            label: 'column label',
            calc: function (dt, row) {
                var val = dt.getValue(row, 1) * dt.getValue(row, 3);
                return {v: val, f: formatter.formatValue(val)};
            }
        }]
    }
});
summary.draw();