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

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

问题:

Q1。正如您所看到的，汇总表是不守规矩的。 population 字段的数字很大，很难阅读。同样，平均 GDP 的小数点太多。我无法格式化字段。如果我使用此代码，图表根本不会显示!

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

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

Q2。我想显示负增长的数量。如何获得一个条件来计算第 21 列中的负值？

Q3。如何使用数学函数计算(第19列的平均值)*(第21列的总和)？

Q4。我无法在 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;
    }
}

要一起回答最后两部分，你应该可以创建一个基于DataTable group的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();