javascript - 在 Google Visualization API 中使用 Group By Aggregation 保留格式

Question

使用 Google 的可视化 API，我使用 google.visualization.data.group 根据我的原始数据创建子表。我的原始数据使用 {v:"US", f:"United States"} 的技巧来显示值以外的内容，但是当我使用聚合函数时，格式被删除，只留下“US”部分。

有什么方法可以保留原始格式，或者有一种简单的方法可以将其添加回使用组聚合创建的数据表吗？

示例数据:

[2010, {v:"MA", f:"Morocco"}, {v:"002", f:"Africa"}, {v:"002", f:"Northern Africa"}, 21.12724],
[2010, {v:"AW", f:"Aruba"}, {v:"019", f:"Americas  "}, {v:"019", f:"Caribbean"}, 0.98],
[2010, {v:"AF", f:"Afghanistan"}, {v:"142", f:"Asia"}, {v:"142", f:"Southern Asia"}, 0.9861],
[2010, {v:"AO", f:"Angola"}, {v:"002", f:"Africa"}, {v:"002", f:"Middle Africa"}, 5.11774],

聚合函数:

var countryData = google.visualization.data.group(
  rawData, 
  [0, 1], 
  [{'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

编辑:

进一步思考，可能无法使用格式进行分组，因为无法保证每个值的格式都一致。考虑到这一点，最好(或唯一可能)编写一个将格式添加到我的数据的每一列的函数。所以问题就变成了，“我到底该怎么做？”

我真的不想单独将原始数据创建为未格式化的值，然后创建额外的表来查找每个值的格式。这将需要额外的 2 个表(一个用于 28 行的区域，一个用于超过 240 行的国家)，然后创建两个函数来查看分组表中的每个值(将有 30 多年的数据，意味着数千行)添加值。

这似乎是一个非常复杂的解决方案。

有没有办法用修饰函数来做到这一点？我可以编写一个函数将表中的每个值作为 {v: "US", f: "United States"} 格式的对象返回吗？或者是否有一种简单的方法来编写一个列格式化程序，它将在我的原始表中查找适当的值并采用该格式？哪一个对我(必须编写它)和用户(必须加载它)造成的麻烦最少？

编辑 2:

看起来我应该能够使用如下方式为新表创建格式化程序:

function (dt, row) {
    return {
        v: (dt.getValue(row, 1) / 1000000),
        f: (dt.getValue(row, 1) / 1000000) + 'M'
    }
}

但问题是，因为我不处理数字格式，所以我必须创建某种查找表来获取值，在查找表中查找它，然后返回适当的格式。看起来我可能必须逐行遍历整个表，这有数千行。

我无法想象，如果没有一些强力循环和赋值，没有一种简单的方法可以做到这一点。

编辑 3:

所以我尝试了一些棘手的事情。我没有将每一行设置为值/格式，而是将值/格式部分创建为字符串，然后在分组后使用 eval() 来评估对象。这很好用。这是数据:

[2010, "{v: 'MA', f: 'Morocco'}", 21.13],
[2010, "{v: 'AW', f: 'Aruba'}", 0.98],
[2010, "{v: 'AF', f: 'Afghanistan'}", 0.99],
[2010, "{v: 'AO', f: 'Angola'}", 5.12],

这是新代码:

  var countryCount = countryData.getColumnRange(0).count;

  for (var i = 0; i <= countryCount; i++) {
    countryData.setValue(i, 1, eval('(' + countryData.getValue(i,1) + ')'));
  };

问题是，当我将其输出到 Google DataTable 时，它​​显示 {v: 'AE', f: 'United Arab Emirates'} 尽管使用 eval 正确检查结果给我:

>>> eval('(' + countryData.getValue(i,1) + ')')
Object v="AE" f="United Arab Emirates"

那么我做错了什么？

Answer 1

好吧，我想出了这个(它是多么令人讨厌的复杂)。

我尝试了一种新方法。我重新格式化了我的数据，然后创建了一个函数来根据该字符串中的分隔符返回一个值/格式。所以我的数据现在看起来像这样:

[2010, "'MA'|'Morocco'", 21.13],
[2010, "'AW'|'Aruba'", 0.98],
[2010, "'AF'|'Afghanistan'", 0.99],
[2010, "'AO'|'Angola'", 5.12],

然后我使用它来获取第 1 列的分隔符位置:

var countryCount = countryData.getNumberOfRows();

for (var i = 0; i <= countryCount; i++) {
  var stringToSplit = countryData.getValue(i,1);
  var dividerLocation = stringToSplit.indexOf("|");
  alert("Divider: " + dividerLocation + ", String: " + stringToSplit);
  countryData.setValue(i, 1, splitFormat(dividerLocation, stringToSplit));
};

然后我使用这个函数来拆分字符串:

  function splitFormat(dividerLocation, stringToSplit) {
    // alert("entered splitFormat Function");
    var stringValue = "";
    var formatValue = "";
    stringValue = stringToSplit.substring(0, dividerLocation);
    formatValue = stringToSplit.substring(dividerLocation + 1)
    alert("v: " + stringValue + ", f: " + formatValue);
    return {
      v: stringValue,
      f: formatValue
    }
      }

问题是我将数据的第 1 列定义为“字符串”，但 Firebug 告诉我从 splitFormat() 函数返回的对象是一个对象(因为我想它是一个数组)。即使我用 v: 和 f: 组件设置原始数据表，它也不想接受返回的数组对象值，因为 FireBug 给了我以下非常有用的建议:

"Error: Type mismatch. Value [object Object] does not match type string in column index 1 (table.I.js,137)"

问题是，虽然您可以使用 {v: , f:} 语法定义 DataTable，但您无法将该语法返回到表中，因为该列的值设置为字符串。相反，我使用 DataTable 的“setFormattedValue”属性来解决这个问题:

  function drawVisualization() {
    var countryTable = new google.visualization.Table(document.getElementById('table'));

    var countryCount = countryData.getNumberOfRows() - 1;

    for (var i = 0; i <= countryCount; i++) {
      var stringToSplit = countryData.getValue(i,1);
      var dividerLocation = stringToSplit.indexOf("|");
      var stringValue = stringToSplit.substring(0, dividerLocation);
      var stringFormat = stringToSplit.substring(dividerLocation + 1);
      countryData.setValue(i, 1, stringValue);
      countryData.setFormattedValue(i, 1, stringFormat);
    };

这正确地为我提供了两者的适当值，即使它对于大型数据集来说有点密集。如果有人知道更简单的方法来执行此操作，那么我将非常乐意听到。